Display Single Table Cells in Row on Checkbox Clicked

Question

I currently have a multiple column table with one column being a column full of checkboxes. Whenever I check a checkbox, I want an extra cell to appear on the right side of the table. Currently, when I check a checkbox, it displays the entire column, but I am wanting it to only display the cell that is in the corresponding row.

How can I do this?

My PHP/HTML code:

<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>

My JavaScript Code:

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

I have changed my code to make it work with a JSFiddle so you can see something for an example of what I currently have and what is going on:

https://jsfiddle.net/d8494316/

Answer 1

Change your JS code to this:

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

Here's a snippet:

 $(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> 

Answer 2

It's enough to change this line:

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

to:

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

In order to preserve the first column toggled if there are more than one checked element you can change:

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

to:

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

This line must be added as last line.

Updated jsfiddle