How to hide sub-rows in jquery table

In website development, tables are often a common form of displaying data. However, sometimes we need to embed sub-rows in the table to display detailed data. If we don't want all of these subrows to be expanded initially, then we need to implement a method that hides the subrows and shows them when needed.

Fortunately, jQuery provides a very convenient method to help us achieve this function. Next, we will use some simple code to implement a jQuery table that can hide sub-rows and display sub-rows.

HTML required

In this example, we will use a simple table to display some data. A table consists of two main parts: header and body. Among them, the table body part contains the data we need to add sub-rows, in which we will add some new rows to display detailed data.

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>john@example.com</td>
      <td>555-1234</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane Doe</td>
      <td>jane@example.com</td>
      <td>555-5678</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Bob Smith</td>
      <td>bob@example.com</td>
      <td>555-9101</td>
    </tr>
  </tbody>
</table>

Hide sub-rows

First, we need to add new rows to the table body. These rows will act as sub-rows, hidden until the user clicks on the main row. We use the following HTML code to add a new row to display additional detailed data:

<tr class="expandable">
  <td colspan="4">
    <p>
      This is some additional data that will be hidden until the main row is clicked.
    </p>
  </td>
</tr>

As you can see, we use a class name expandable to represent this new row is scalable, and we set its number of columns to 4 so that the width of the sub-row will be the same as the main row.

Then, we hide these new rows so the user doesn’t see them when the page loads. We can use the following CSS code to achieve this:

tr.expandable {
  display: none;
}

Now that we have successfully hidden the sub-rows when the web page is loaded, we need to add some code to display the sub-rows when the main row is clicked. .

Show sub-rows

In this example, we will expand the sub-rows by clicking on the main row. At this time, we will use jQuery and use the click() function to monitor the user's click event. At this time, we can realize the expansion and collapse operations of the sub-rows corresponding to the main row.

$(document).ready(function() {
  $('table').on('click', 'tr', function() {
    var expandable = $(this).next('.expandable');
    expandable.toggle();
  });
});

We use $(document).ready() to ensure that all elements in the page have been fully loaded, and then click()# the entire table object ##Event monitoring. When the user clicks on a row of the table, we will get the content of the next row, that is, the expandable sub-rows we added in advance, and expand or collapse them through jQuery's toggle() function.

Through the above code, we can realize the function of expanding sub-rows.

Summary

In this article, we show how to use jQuery to implement sub-rows in the table and expand and collapse operations. By adding dynamic HTML and CSS code, we successfully hide the sub-rows and display them when the user clicks on the main row. These simple steps can be easily applied to the development of any website form, bringing a better user experience to your website.

The above is the detailed content of How to hide sub-rows in jquery table. For more information, please follow other related articles on the PHP Chinese website!