Установлен флажок Отображать ячейки одной таблицы в строке

В настоящее время у меня есть таблица из нескольких столбцов, в которой один столбец содержит полный флажок. Всякий раз, когда я проверяю флажок, я хочу, чтобы в правой части таблицы появлялась дополнительная ячейка. В настоящее время, когда я проверяю флажок, он отображает весь столбец, но я хочу, чтобы он отображал только ячейку, которая находится в соответствующей строке.

Как я могу это сделать?

Мой код PHP/HTML:

<table id="merchTable" cellspacing="5" class="sortable">
    <thead>
        <tr class="ui-widget-header">
            <th class="sorttable_nosort"></th>
            <th class="sorttable_nosort">Loc</th>
            <th class="merchRow">Report Code</th>
            <th class="merchRow">SKU</th>
            <th class="merchRow">Special ID</th>
            <th class="merchRow">Description</th>
            <th class="merchRow">Quantity</th>
            <th class="sorttable_nosort">Unit</th>
            <th style="display: none;" class="num">Quantity #</th>
        </tr>
    </thead>
    <tbody>

        <?php foreach ($dbh->query($query) as $row) {?>

        <tr>
            <td><input type="checkbox" class="check" name="check"></td>
            <td class="loc"></td>
            <td class="rp-code" align="center"></td>
            <td class="sku"></td>
            <td class="special-id" align="center"></td>
            <td class="description"></td>
            <td class="quantity" align="center"></td>
            <td class="unit"></td>
            <td style="display: none;" class="quantity_num"></td>
        </tr>

    <?php } ?>

    </tbody>
</table>

Мой код JavaScript:

$(function () {
    $(".check").change(function(){
    $("#merchTable th.num").toggle(this.checked);
    $("#merchTable td.quantity_num").toggle(this.checked); 
});
});

Я изменил свой код, чтобы он работал с JSFiddle, чтобы вы могли увидеть кое-что для примера того, что у меня сейчас есть и что происходит:

https://jsfiddle.net/d8494316/

Источник

2 ответа

Решение

Измените свой код JS на это:

$(function () {
    $(".check").change(function(){
        $(this).closest('tr').find('td.quantity_num').toggle(this.checked)
    });
});

Вот фрагмент:

$(function () {
    $(".check").change(function(){
    $(this).closest('tr').find('td.quantity_num').toggle(this.checked);
    console.log($('input.check').is(':checked'))
  if($('input.check').is(':checked'))
    $(this).closest('table').find('th.num').toggle(true);
    else
    $(this).closest('table').find('th.num').toggle(false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="merchTable" cellspacing="10" class="sortable">
 <thead>
  <tr class="ui-widget-header">
   <th class="sorttable_nosort"></th>
   <th class="sorttable_nosort">Loc</th>
   <th class="merchRow">Report Code</th>
   <th class="merchRow">SKU</th>
   <th class="merchRow">Special ID</th>
   <th class="merchRow">Description</th>
   <th class="merchRow">Quantity</th>
   <th class="sorttable_nosort">Unit</th>
   <th style="display: none;" class="num">Quantity #</th>
  </tr>
 </thead>
 <tbody>
  
  <tr>
   <td><input type="checkbox" class="check" name="check"></td>
   <td class="loc">Ex. 1</td>
   <td class="rp-code" align="center">Ex. 2</td>
   <td class="sku">Ex. 3</td>
   <td class="special-id" align="center">Ex. 4</td>
   <td class="description">Ex. 5</td>
   <td class="quantity" align="center">Ex. 6</td>
   <td class="unit">Ex. 7</td>
   <td style="display: none;" class="quantity_num">Ex. 8</td>
  </tr>
    <tr>
   <td><input type="checkbox" class="check" name="check"></td>
   <td class="loc">Ex. 1</td>
   <td class="rp-code" align="center">Ex. 2</td>
   <td class="sku">Ex. 3</td>
   <td class="special-id" align="center">Ex. 4</td>
   <td class="description">Ex. 5</td>
   <td class="quantity" align="center">Ex. 6</td>
   <td class="unit">Ex. 7</td>
   <td style="display: none;" class="quantity_num">Ex. 8</td>
  </tr>
    <tr>
   <td><input type="checkbox" class="check" name="check"></td>
   <td class="loc">Ex. 1</td>
   <td class="rp-code" align="center">Ex. 2</td>
   <td class="sku">Ex. 3</td>
   <td class="special-id" align="center">Ex. 4</td>
   <td class="description">Ex. 5</td>
   <td class="quantity" align="center">Ex. 6</td>
   <td class="unit">Ex. 7</td>
   <td style="display: none;" class="quantity_num">Ex. 8</td>
  </tr>
  
 </tbody>
</table>

Источник

Достаточно изменить эту строку:

$("#merchTable td.quantity_num").toggle(this.checked);

чтобы:

$(this).closest('td').nextAll(" td.quantity_num").toggle(this.checked);

Чтобы сохранить переключение первого столбца, если имеется более одного отмеченного элемента, вы можете изменить:

$("#merchTable th.num").toggle(this.checked);

чтобы:

$ ("# merchTable th.num"). toggle ($ ("# merchTable td.quantity_num: visible"). length> 0);

Эта строка должна быть добавлена ​​как последняя строка.

Обновлен jsfiddle

Источник
Другие вопросы по тегам