First Option for expanding/collapsing HTML table row

A common UI will have an HTML table of data rows. When we click on "Expand", it shows a detailed breakdown of "child" rows below the "parent" row. In a parent row, click on the “+” sign; it expands the child row with detailed information. At the same time, the parent sign toggles to “- “.

Once we click on “- “sign, then it will collapse child rows with parent sign “+”.

The requirements are,

  1. Put a class of "parent" on each parent row (tr).
  2. Give each parent row (tr) an attribute ”data-toggle="toggle"”.
  3. Give each child row cover under <tbody> a class=hideTr.

Below is the sample of the table structure.

  1. <table>
  2. <tr data-toggle="toggle">
  3. <td >
  4. <p id="Technology" >
  5. <b>
  6. <span class="plusminusTechnology">+</span>
  7. <span lang="EN-IN">Technology </span>
  8. </b>
  9. </p>
  10. </td>
  11. <td ></td>
  12. <td ></td>
  13. </tr>
  14. <tbody class="hideTr">
  15. <tr >
  16. <td "></td>
  17. <td >
  18. <img height="28" src="clip_image001.png" v:shapes="Picture_x0020_5" width="106" />
  19. </td>
  20. <td
  22. <span lang="EN-IN">4</span>
  23. </td>
  24. <td
  26. </td>
  27. </tr>
  28. </tbody>
  29. </table>

Script Code

  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  3. <script type="text/javascript">
  4. $(document).ready(function () {
  5. debugger;
  6. $('.hideTr').slideUp(600);
  7. $('[data-toggle="toggle"]').click(function () {
  8. if ($(this).parents().next(".hideTr").is(':visible')) {
  9. $(this).parents().next('.hideTr').slideUp(600);
  10. $(".plusminus" + $(this).children().children().attr("id")).text('+');
  11. $(this).css('background-color', 'white');
  12. }
  13. else {
  14. $(this).parents().next('.hideTr').slideDown(600);
  15. $(".plusminus" + $(this).children().children().attr("id")).text('- ');
  16. $(this).css('background-color', '#c1eaff ');
  17. }
  18. });
  19. });
  20. </script>

Expand/Collapse Table Rows With jQuery

Expand/Collapse Table Rows With jQuery
Expand/Collapse Table Rows With jQuery

Second option

A common UI which will have an HTML table of record rows, in which when we click on "Expand", it shows a detailed breakdown of "child" rows below the "parent" row.

The requirements are:

  1. Add a class of "parent" on each parent row (tr).
  2. Give each parent row (tr) an id.
  3. Give each child row a class of "child-ID" where ID is the id of the parent tr that it belongs to.
  1. <table id="detail_table" class="detail">
  2. <thead>
  3. <tr>
  4. <th>ID</th>
  5. <th colspan="2">Name</th>
  6. <th>Total</th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr class="parent" id="row123" title="Click to expand/collapse" style="cursor: pointer;">
  11. <td>123</td>
  12. <td colspan="2">Bill Gates</td>
  13. <td>100</td>
  14. </tr>
  15. <tr class="child-row123" style="display: table-row;">
  16. <td> </td>
  17. <td>2018-01-02</td>
  18. <td>A short description of Microsoft revenue </td>
  19. <td>15</td>
  20. </tr>
  21. <tr class="child-row123" style="display: table-row;">
  22. <td> </td>
  23. <td>2018-02-03</td>
  24. <td>Another New Project description</td>
  25. <td>45</td>
  26. </tr>
  27. <tr class="child-row123" style="display: table-row;">
  28. <td> </td>
  29. <td>2010-03-04</td>
  30. <td>More New Stuff</td>
  31. <td>40</td>
  32. </tr>
  34. <tr class="parent" id="row456" title="Click to expand/collapse" style="cursor: pointer;">
  35. <td>456</td>
  36. <td colspan="2">Bill Brasky</td>
  37. <td>50</td>
  38. </tr>
  39. <tr class="child-row456" style="display: none;">
  40. <td> </td>
  41. <td>2009-07-02</td>
  42. <td>A short Two Describe a Third description</td>
  43. <td>10</td>
  44. </tr>
  45. <tr class="child-row456" style="display: none;">
  46. <td> </td>
  47. <td>2008-02-03</td>
  48. <td>Another New story description</td>
  49. <td>20</td>
  50. </tr>
  51. <tr class="child-row456" style="display: none;">
  52. <td> </td>
  53. <td>2009-03-04</td>
  54. <td>More story Stuff</td>
  55. <td>20</td>
  56. </tr>
  58. <tr class="parent" id="row789" title="Click to expand/collapse" style="cursor: pointer;">
  59. <td>789</td>
  60. <td colspan="2">Phil Upspace</td>
  61. <td>75</td>
  62. </tr>
  63. <tr class="child-row789" style="display: none;">
  64. <td> </td>
  65. <td>2008-01-02</td>
  66. <td>A short New Games description</td>
  67. <td>33</td>
  68. </tr>
  69. <tr class="child-row789" style="display: none;">
  70. <td> </td>
  71. <td>20011-04-03</td>
  72. <td>Another Games description</td>
  73. <td>22</td>
  74. </tr>
  75. <tr class="child-row789" style="display: none;">
  76. <td> </td>
  77. <td>20011-04-04</td>
  78. <td>More Games Stuff</td>
  79. <td>20</td>
  80. </tr>
  81. </tbody>
  82. </table>

Script Code

  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  2. <script type="text/javascript">
  3. $(document).ready(function () {
  4. $('tr.parent')
  5. .css("cursor", "pointer")
  6. .attr("title", "Click to expand/collapse")
  7. .click(function () {
  8. $(this).siblings('.child-' + this.id).toggle();
  9. });
  10. $('tr[@class^=child-]').hide().children('td');
  11. });
  12. </script>

Expand/Collapse Table Rows With jQuery

Expand/Collapse Table Rows With jQuery