Блог

У меня есть следующий код:

Javascript выглядит следующим образом:

     $(document).ready(function() {
        $('#btnHide').click(function() {
            $('td:nth-child(1)').nextUntil(':nth-child(4)').toggle();

        });
    });
  

и html выглядит следующим образом

 <table id="tableone" border="1">
<tr>
    <td>Row 0 Column 0</td>
    <td >Row 0 Column 1</td>
    <td >Row 0 Column 2</td>
    <td >Row 0 Column 3</td>
</tr>
<tr>
    <td>Row 1 Column 0</td>
    <td>Row 1 Column 1</td>
    <td>Row 1 Column 2</td>
    <td>Row 1 Column 3</td>
</tr>
<tr>
    <td>Row 2 Column 0</td>
    <td>Row 2 Column 1</td>
    <td>Row 2 Column 2</td>
<td>Row 2 Column 3</td>
</tr>
<tr>
    <td>Row 3 Column 0</td>
    <td>Row 3 Column 1</td>
    <td>Row 3 Column 2</td>
    <td>Row 3 Column 3</td>
</tr>
 <tr>
    <td>Row 4 Column 0</td>
    <td>Row 4 Column 1</td>
    <td>Row 4 Column 2</td>
    <td>Row 4 Column 3</td>
</tr>
 <tr>
    <td>Row 5 Column 0</td>
    <td>Row 5 Column 1</td>
    <td>Row 5 Column 2</td>
    <td>Row 5 Column 3</td>
</tr>


<input id="btnHide" type="button" value="Hide Columns"/>    
  

Что бы я ни делал, я, похоже, не могу найти, как скрыть и первый столбец.. Я использовал 0 вместо 1, чтобы посмотреть, индексируется ли она с использованием 0 в качестве первой записи, но, похоже, это тоже не работает. Как бы я мог выбрать первый столбец, который также сворачивается при нажатии кнопки

ДОБАВЛЕННЫЙ ВОПРОС: после тестирования этого в моем макете я понял, что при нажатии этой кнопки столбцы во всех таблицах на странице сворачиваются. Поскольку я никоим образом не являюсь экспертом по Javascript, может ли кто-нибудь указать мне правильное направление в том, как я мог бы ориентироваться на конкретные таблицы. Спасибо

.nextUntil() возвращает элементы после исходного элемента, но не включая исходный элемент. Используется addBack() для добавления исходного элемента в набор:

 $('td:nth-child(1)').nextUntil(':nth-child(4)').addBack().toggle();
  

Привет, ты можешь сделать это так:

 $('#btnHide').click(function() {
    $('td:not(td:nth-child(4))').toggle();

 });
  

здесь вы выбираете каждый элемент, кроме элемента, на который ссылается «:not ()»