Question

我必须在表格中显示已打开的作品（1,2,3 ......），其中包括相关任务列表（1,2,3 ...），每一行都在一行中。任务可以打开或关闭。我试图找到一种方法来隐藏/显示特定工作（表）的已关闭任务（行），方法是单击类似“showhideforwork-x”类中的行。

<table class="work-1">
  <tr class="showhideforwork-1"><td>Hide closed tasks</td><tr>
  <tr><td>Task 1 (opened)</td></tr>
  <tr class="showhidework-1"><td>Task 2 (closed)</td></tr>
  <tr class="showhidework-1"><td>Task 3 (closed)</td></tr>
  <tr><td>Task 4 (opened)</td></tr>
</table>

<table class="work-2">
  <tr class="showhideforwork-2"><td>Hide closed tasks</td><tr>
  <tr class="showhidework-2"><td>Task 1 (closed)</td></tr>
  <tr class="showhidework-2"><td>Task 1 (closed)</td></tr>
  <tr><td>Task 3 (opened)</td></tr>
</table>

<table class="work-n">
  <tr class="showhideforwork-3"><td>Hide closed tasks</td><tr>
  <tr><td>Task 1 (opened)</td></tr>
  <tr class="showhidework-n"><td>Task 2 (closed)</td></tr>
  <tr class="showhidework-n"><td>Task 3 (closed)</td></tr>
</table>

我想我不会按照应用方式来捕捉“showhideforwork-x”元素的点击并隐藏/显示相应的“showhidework-x”行。

Answer 1

您应该为封闭元素分配一个公共类，在父级内找到该类的所有元素，并隐藏/显示（切换）它们

HTML

<table class="work-1">
  <tr class="showhideforwork"><td>Hide closed tasks</td><tr>
  <tr><td>Task 1 (opened)</td></tr>
  <tr class="showhidework-closed"><td>Task 2 (closed)</td></tr>
  <tr class="showhidework-closed"><td>Task 3 (closed)</td></tr>
  <tr><td>Task 4 (opened)</td></tr>
</table>

<table class="work-2">
  <tr class="showhideforwork"><td>Hide closed tasks</td><tr>
  <tr class="showhidework-closed"><td>Task 1 (closed)</td></tr>
  <tr class="showhidework-closed"><td>Task 1 (closed)</td></tr>
  <tr><td>Task 3 (opened)</td></tr>
</table>

<table class="work-n">
  <tr class="showhideforwork"><td>Hide closed tasks</td><tr>
  <tr><td>Task 1 (opened)</td></tr>
  <tr class="showhidework-closed"><td>Task 2 (closed)</td></tr>
  <tr class="showhidework-closed"><td>Task 3 (closed)</td></tr>
</table>

jQuery代码

$(".showhideforwork").click(function() {
  $(this).parent().find(".showhidework-closed").toggle();
});

编辑：小提琴 Demo

Answer 2

我这样做了。这是你需要的吗？

＆＃13;

$(document).ready(function() {
  function checkTasks(){
    var check = $('tr td');
    console.log(check[1]);
    $('tr td').each(function(index) {
    //console.log( index + ": " + $( this ).text() );
      if( $( this ).text().indexOf("closed") != -1){
			$(this).parent().hide();
		}
    });
  }
  checkTasks(); 
  //you can call this function on body load or set 
  //time out to check every 5 or 10 minutes
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="work-1">
  <tr class="showhideforwork-1"><td>Hide closed tasks</td><tr>
  <tr><td>Task 1 (opened)</td></tr>
  <tr class="showhidework-1"><td>Task 2 (closed)</td></tr>
  <tr class="showhidework-1"><td>Task 3 (closed)</td></tr>
  <tr><td>Task 4 (opened)</td></tr>
</table>

<table class="work-2">
  <tr class="showhideforwork-2"><td>Hide closed tasks</td><tr>
  <tr class="showhidework-2"><td>Task 1 (closed)</td></tr>
  <tr class="showhidework-2"><td>Task 1 (closed)</td></tr>
  <tr><td>Task 3 (opened)</td></tr>
</table>

<table class="work-n">
  <tr class="showhideforwork-3"><td>Hide closed tasks</td><tr>
  <tr><td>Task 1 (opened)</td></tr>
  <tr class="showhidework-n"><td>Task 2 (closed)</td></tr>
  <tr class="showhidework-n"><td>Task 3 (closed)</td></tr>
</table>

＆＃13;

显示在多个元素上隐藏多个div

2 个答案: