CODEWITHSUNDEEP
javascripthtml
Rick Kap
Rick Kap

Reputation: 159

Showing multiple additional rows on table

I found this coding on the web which I would like to implement on my website but I need it to expand multiple rows when the user clicks on the top row.

With the code as it stands will display both rows but the formatting isn't correct.

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>

Upvotes: 2

Views: 75

Answers (2)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

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

Then you could use common classes instead of id's like the following example shows.

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>

Upvotes: 4

Sjoerd de Wit
Sjoerd de Wit

Reputation: 2413

You have the colspan set to 4 instead of 2 so it takes up 8 columns instead of 4 in total.

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

and 

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

Upvotes: 1

Related Questions