如何更改单击下面的表格行的类别？答案

【问题标题】：How to change class of table row below clicked one?如何更改单击下面的表格行的类别？
【发布时间】：2016-04-27 20:52:10
【问题描述】：

我在切换表格行类时遇到问题。

我有以下 tbody：

<tbody>
    <tr class="click-row">
        <buttton>Show/Hide</button>
    </tr>
    <tr></tr>
    <tr class="hidden-row"></tr>
    <tr class="click-row">
        <buttton>Show/Hide</button>
    </tr>
    <tr></tr>
    <tr class="hidden-row"></tr>
    <tr class="click-row">
        <buttton>Show/Hide</button>
    </tr>
    <tr></tr>
    <tr class="hidden-row"></tr>
    <tr class="click-row">
        <buttton>Show/Hide</button>
    </tr>
    <tr></tr>
    <tr class="hidden-row"></tr>
</tbody>

我想知道，在单击带有hidden-row 的行之后，如何切换第一个隐藏行？我使用 Angular2。

换句话说：

我想要做的是切换 tr 下方 2 行的行，其中单击了按钮。

【问题讨论】：

你的问题太混乱了
哈哈。我想要做的是切换 tr 下方 2 行的行，其中单击了按钮。

标签： jquery css angular

【解决方案1】：

我会利用 ngClass 来使用线条对象来做到这一点：

<tbody>
  <tr class="click-row">
    <buttton (click)="hiddenRows['0']=true">Show/Hide</button>
  </tr>
  <tr></tr>
  <tr class="hidden-row" ngClass="{'hidden-row': hiddenRows['0']}></tr>
  (...)
</tbody>

hiddenRows必须在组件的构造函数中初始化。

【讨论】：

【解决方案2】：

jQuery 解决方案

使用.nextAll() 和:first

$('button').on('click',function(){
   $(this).closest('tr').nextAll('.hidden-row:first').toggle();
});

.hidden-row {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="click-row">
      <td>
        <button>Show/Hide</button>
      </td>
    </tr>
    <tr></tr>
    <tr class="hidden-row">
      <td>1st hidden row</td>
    </tr>
    <tr class="click-row">
      <td>
        <button>Show/Hide</button>
      </td>
    </tr>
    <tr></tr>
    <tr class="hidden-row">
      <td>2nd hidden row</td>
    </tr>
    <tr class="click-row">
      <td>
        <button>Show/Hide</button>
      </td>
    </tr>
    <tr></tr>
    <tr class="hidden-row">
      <td>3rd hidden row</td>
    </tr>
    <tr class="click-row">
      <td>
        <button>Show/Hide</button>
      </td>
    </tr>
    <tr></tr>
    <tr class="hidden-row">
      <td>4th hidden row</td>
    </tr>
  </tbody>
</table>

【讨论】：