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)
    });
});

这是一个片段：

＆＃13;

$(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);
});
});

＆＃13;

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

＆＃13;

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＆gt; 0）;

此行必须添加为最后一行。

更新了jsfiddle

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

2 个答案: