У меня есть набор полей, в котором есть таблица с несколькими tr и td. Мне нужно скрыть все событие td при щелчке, кроме td, которое щелкнуто внутри набора полей. Я попытался перейти к родительскому tr тех tds, которые нужно щелкнуть, а затем установить css на «display: none». Но вместо этого он, кажется, скрывает все тд.

Вот моя скрипка. Можно ли этого добиться с помощью тех же самых обходов.

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

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

0
rawatdeepesh 7 Янв 2016 в 09:01

3 ответа

Лучший ответ

Вот что вам понадобится:

$(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>
0
PeterKA 7 Янв 2016 в 06:31

Вам нужно использовать

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

Это должно сначала найти родителя, а затем найти td внутри него и выполнить операцию с результатом, кроме текущего.

1
user6841285user6841285 16 Сен 2016 в 22:45

Пожалуйста, добавьте id = "td_col" в этот td как

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

0
msvairam 7 Янв 2016 в 08:36