隐藏 table 中的所有 td，不包括被点击的

Question

我有一个字段集，其中有一个 table 和多个 tr 和 td 。除了在字段集中单击的 td 之外，我必须在单击事件时隐藏所有 td。我尝试遍历到必须单击的 tds 的父 tr，然后将 css 设置为 "display:none" 。但它似乎隐藏了所有的 td。

这是我的fiddle。这是否可以使用相同的相同遍历来实现。

           $('#fieldset_QCNew table tbody tr td:nth-child('+index+')').css("display","none");

https://jsfiddle.net/rawatdeepesh/dzg68ajk/1/

Answer 1

这是您需要的：

$(function() {
    $('td').on('click', function() {
        $(this).closest('table').find('td').not(this).toggle();
    });
});

注意：如果您希望单元格保持其位置，则使用 .css("visibility", "hidden") 而不是 .hide() 或 toggle --使用 .css("display", "none") - 可以实现这一点。

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

Answer 2

请在 td 中添加 id="td_col"，例如

<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 link https://jsfiddle.net/mutvairam/ymysc1sv/

Answer 3

你需要使用

$(this).closest('table').find('td').not(this).toggle();

这里应该是先找到parent，再定位到里面的td，对除当前结果外的结果进行运算

隐藏 table 中的所有 td，不包括被点击的

hide all td in a table excluding the clicked one

jquery

hide

html-table

jsfiddle

jquery-traversing