CODEWITHSUNDEEP
javascriptphpjquerycheckboxhtml-table
Rataiczak24
Rataiczak24

Reputation: 1042

Display Single Table Cells in Row on Checkbox Clicked

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/

Upvotes: 0

Views: 312

Answers (2)

gaetanoM
gaetanoM

Reputation: 42054

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

Upvotes: 1

gaganshera
gaganshera

Reputation: 2639

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>

Upvotes: 1

Related Questions