将所有td隐藏在表中,不包括所单击的td

时间:2016-01-07 06:01:27

标签: jquery hide html-table jsfiddle jquery-traversing

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

这是我的小提琴。这可以使用相同的遍历来实现。

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

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

3 个答案:

答案 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;
&#13;
&#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/