在表格上显示多个额外的行

Question

我在网上找到了这个我希望在我的网站上实现的编码，但是当用户点击顶行时我需要扩展多行。

使用现有代码将显示两行，但格式不正确。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

  

但是当用户点击顶行时，我需要它展开多行

然后你可以使用普通的类代替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>

Answer 2

您将colspan设置为4而不是2，因此它占用了8列而不是4列。

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

和

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