我有一个字段集,其中我有一个包含多个tr和td的表。除了在字段集中单击的td之外,我必须在click事件中隐藏所有td。 我尝试遍历必须单击的tds的父tr,然后将css设置为" display:none" 。但它似乎隐藏了所有的td。
这是我的小提琴。这可以使用相同的遍历来实现。
$('#fieldset_QCNew table tbody tr td:nth-child('+index+')').css("display","none");
答案 0 :(得分:1)
你需要使用
$(this).closest('table').find('td').not(this).toggle();
这应首先找到父级,然后将td放在其中并对结果执行操作,除了当前的结果。
答案 1 :(得分:0)
以下是您的需求:
.css("visibility", "hidden")
注意:如果您希望单元格保持其位置,请使用.hide()
而非toggle
或.css("display", "none")
- 使用{ {1}} - 会实现这一点。
$(function() {
$('td').on('click', function() {
$(this).closest('table').find('td').not(this).toggle();
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Col A</th>
<th>Col B</th>
<th>Col C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
<tr>
<td>3,1</td>
<td>3,2</td>
<td>3,3</td>
</tr>
</tbody>
</table>
&#13;
答案 2 :(得分:0)
请添加id =&#34; td_col&#34;在那个td&like
<td id="td_col" style="vertical-align:top;width:25%;">
并添加以下脚本
$(document.body).on('click', '#td_col', function(event) {
$("[id^=td_col]").hide();
$(this).show();
});
参考jsfiddle链接 https://jsfiddle.net/mutvairam/ymysc1sv/