Question

这是我的HTML表格。

lock(classA.classB){
//my codes that modifies classA.classB
}

我想知道如何使用jquery隐藏第二列（id以“...... tasks-name”结尾），如果第一列（复选框）（id以“.... tasks-is-结尾”完成“）被”检查“

这可以在jquery中做吗？

如果它不是表格，那么我可以做类似

的事情

<table id="all-tasks-display-table">
<thead>
    <th>Status</th>
    <th>Subject</th>
</thead>
<tbody>
<tr>
    <td><input id="j_id0:acc-details:all-tasks-list-repeat:0:all-tasks-is-completed" type="checkbox" name="j_id0:acc-details:all-tasks-list-repeat:0:all-tasks-is-completed" checked="checked">
    <td><span id="j_id0:acc-details:all-tasks-list-repeat:0:all-tasks-name">ALPHA</span></a></td>
</tr>
<tr>
    <td><input id="j_id1:acc-details:all-tasks-list-repeat:0:all-tasks-is-completed" type="checkbox" name="j_id1:acc-details:all-tasks-list-repeat:1:all-tasks-is-completed">
    <td><span id="j_id1:acc-details:all-tasks-list-repeat:0:all-tasks-name">BETA</span></a></td>
</tr>
</tbody>
</table>

但由于它在表格中出现，我不知道如何继续。

Answer 1

所以使用：has（）和tr来选择行。

$("tr:has([id$='all-tasks-is-completed'])").hide();

你能做到的另一种方式是最近的

$("[id$='all-tasks-is-completed']").closest("tr").hide();

Answer 2

假设html标记始终相同，使用closest()获取父tr，然后使用find()查找目标范围，然后使用parent()定位列父td然后使用hide()隐藏

$("[id$='all-tasks-is-completed']").change(function() {

  if ($(this).is(":checked")) {
    $(this).closest('tr').find("span[id$='all-tasks-name']").hide();
  }

}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="all-tasks-display-table">
  <thead>
    <th>Status</th>
    <th>Subject</th>
  </thead>
  <tbody>
    <tr>
      <td><input id="j_id0:acc-details:all-tasks-list-repeat:0:all-tasks-is-completed" type="checkbox" name="j_id0:acc-details:all-tasks-list-repeat:0:all-tasks-is-completed" checked="checked" /></td>
      <td><a><span id="j_id0:acc-details:all-tasks-list-repeat:0:all-tasks-name">ALPHA</span></a></td>
    </tr>
    <tr>
      <td><input id="j_id1:acc-details:all-tasks-list-repeat:0:all-tasks-is-completed" type="checkbox" name="j_id1:acc-details:all-tasks-list-repeat:1:all-tasks-is-completed">
        <td><a><span id="j_id1:acc-details:all-tasks-list-repeat:0:all-tasks-name">BETA</span></a></td>
    </tr>
  </tbody>
</table>

jquery：隐藏表中的兄弟元素

2 个答案: