单击复选框时在行中显示单个表格单元格

Question

我目前有一个多列表，其中一列是一列充满复选框的列。每当我选中一个复选框时，我都希望在表格的右侧出现一个额外的单元格。目前，当我选中一个复选框时，它会显示整个列，但我希望它只显示相应行中的单元格。

我该怎么做？

我的 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/

Answer 1

把你的 JS 代码改成这样：

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

这是一个sn-p：

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

改变这一行就足够了：

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