javascript - 在表上显示多个附加行

Question

我在网上找到了这个编码，我想在我的网站上实现它，但当用户单击顶行时，我需要它来展开多行。

按照目前的代码，将显示两行，但格式不正确。

function show_hide_row(row) {
  $("#" + row).toggle();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="wrapper">

  <table border=1 id="table_detail" align=center cellpadding=10>

    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Salary</th>
      <th>Job</th>
    </tr>

    <tr onclick="show_hide_row ('hidden_row1');">
      <td>Ankit</td>
      <td>25</td>
      <td>60000</td>
      <td>Computer Programmer</td>
    </tr>

    <tr id="hidden_row1" class="hidden_row">
      <td colspan=4>Ankit is 25 years old and he is a computer programmer he earns 60000 per month</td>
      <td colspan=4>and he like soccer, tennis and reading</td>
    </tr>

    <tr onclick="show_hide_row   ('hidden_row2');">
      <td>Aarti</td>
      <td>29</td>
      <td>40000</td>
      <td>Web Designer</td>
    </tr>

    <tr id="hidden_row2" class="hidden_row">
      <td colspan=4>Aarti is 29 years old and she is a web designer he earns 40000 per month</td>
      <td colspan=4>and he like eating like a pig</td>
    </tr>

  </table>

</div>

Answer 1

But I need it to expand multiple rows when the user clicks on the top row

然后您可以使用通用类而不是 id，如以下示例所示。

function show_hide_row(row) {
  $("." + row).toggle();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="wrapper">

  <table border=1 id="table_detail" align=center cellpadding=10>

    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Salary</th>
      <th>Job</th>
    </tr>

    <tr onclick="show_hide_row ('hidden_row1');">
      <td>Ankit</td>
      <td>25</td>
      <td>60000</td>
      <td>Computer Programmer</td>
    </tr>

    <tr class="hidden_row hidden_row1">
      <td colspan=4>Ankit is 25 years old and he is a computer programmer he earns 60000 per month</td>
    </tr>
    <tr class="hidden_row hidden_row1">
      <td colspan=4>and he like soccer, tennis and reading</td>
    </tr>

    <tr onclick="show_hide_row('hidden_row2');">
      <td>Aarti</td>
      <td>29</td>
      <td>40000</td>
      <td>Web Designer</td>
    </tr>

    <tr class="hidden_row hidden_row2">
      <td colspan=4>Aarti is 29 years old and she is a web designer he earns 40000 per month</td>
    </tr>
    <tr class="hidden_row hidden_row2">
      <td colspan=4>and he like eating like a pig</td>
    </tr>

  </table>

</div>