0

I have a fieldset in which I have a table with multiple tr and td . I have to hide all the td upon click event except the td that is clicked inside the fieldset. I tried traversing to the parent tr of the tds that have to be clicked and then set the css to "display:none" . But it seems to hide all the td instead.

Here is my fiddle. Could this be achieved using the same the same traversals .

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

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

rawatdeepesh
  • 584
  • 8
  • 31

3 Answers3

1

Here is what you need:

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

NOTE: If you'd like the cells to maintain their positions then using .css("visibility", "hidden") rather than .hide() or toggle -- which use .css("display", "none") -- would achieve that. 

$(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>
PeterKA
  • 24,158
  • 5
  • 26
  • 48
  • Thanks Peter.I did the same , but it only works for the firs td. I changed the traversal code to `$('#fieldset_QCNew table tbody tr').children('td').not(this).toggle()` . Here is the updated fiddle : https://jsfiddle.net/rawatdeepesh/dzg68ajk/9/ – rawatdeepesh Jan 07 '16 at 06:37
  • You seem to have a table within a table within a table! Would you clearly give the **structure** of your table so we don't have to go through the html in jsfiddle to find that out. Any particular reason for using such a complex structure? – PeterKA Jan 07 '16 at 06:56
  • This table is made in a 3rd party tool that is why its structure is so weird . I tried traversing to the parent of the target tds but the toggle is still working for the first td. Any Suggestions. thanks in advance!! – rawatdeepesh Jan 07 '16 at 07:18
1

you need to use 

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

This should find the parent first and then locare the td inside it and perform operation on the result except the current one.

0

Pls add the id="td_col" in that td's like 

<td id="td_col" style="vertical-align:top;width:25%;">

And the add the below script 

$(document.body).on('click', '#td_col', function(event) {

 $("[id^=td_col]").hide();
 $(this).show();

});

Refer the jsfiddle link https://jsfiddle.net/mutvairam/ymysc1sv/

msvairam
  • 862
  • 5
  • 12