How to use JavaScript to implement dynamic expansion of N-order Tables and Rows?

Use JavaScript to implement dynamic expansion of N-order tables and rows

In front-end development, it is often necessary to implement dynamic expansion functions similar to FineReport, which supports horizontal and vertical expansion of table data, and can handle nested expansion at any level. This article will explain how to implement this functionality using JavaScript.

Requirements Analysis

We need to build a JavaScript component that can dynamically expand and shrink tabular data, with the following functions:

• Dynamic horizontal expansion: Expand the columns in the table to display more detailed data.
• Dynamic vertical expansion: Expand the rows in the table to display sub-row data.
• Nesting at any level: Supports multi-layer nested tabular data expansion.

Implementation plan

The key to implementing this function lies in clever data structure design and DOM operation.

1. Data structure: Use a tree structure (such as a JSON object) to represent multi-level tabular data. Each node contains its own data and a child node array. For example:

 {
  "id": 1,
  "name": "Category 1",
  "children": [
    {
      "id": 11,
      "name": "Subcategory 1.1",
      "children": [
        { "id": 111, "name": "Item 1.1.1" }
      ]
    },
    {
      "id": 12, "name": "Subcategory 1.2", "children": [] }
  ]
}

2. DOM Operation: Use JavaScript to dynamically create and manipulate DOM elements. We can create and add table rows and cells using createElement and appendChild methods.

3. Event handling: Add a click event listener to a table row or cell. Click the event to develop or shrink the operation and update the DOM.

Code example (simplified version, only showing core logic)

 function renderTable(data, parentElement) {
  const table = document.createElement('table');
  data.forEach(item => {
    const row = table.insertRow();
    const cell = row.insertCell();
    cell.textContent = item.name;

    if (item.children && item.children.length > 0) {
      const expandIcon = document.createElement('span');
      expandIcon.textContent = ' '; // Expand the icon cell.appendChild(expandIcon);

      expandIcon.addEventListener('click', () => {
        if (row.nextElementSibling) { // Expanded, then shrink row.nextElementSibling.remove();
          expandIcon.textContent = ' ';
        } else { // If not expanded, expand const subTable = document.createElement('table');
          renderTable(item.children, subTable);
          parentElement.insertBefore(subTable, row.nextSibling);
          expandIcon.textContent = '-';
        }
      });
    }
  });
  parentElement.appendChild(table);
}

// Sample data const data = { /* ... (JSON data as shown above) ... */ };

// Get the container element const container = document.getElementById('container');

// Render table renderTable(data.children, container);

This code example is a simplified version that shows only the core logic. In practical applications, more details may need to be considered, such as style, error handling, performance optimization, etc. Horizontal expansion requires more complex data structures and DOM operations, and can be considered using nested tables or other layout methods. A complete implementation requires more code, but the core idea is shown above.

Hopefully, this improved answer can explain more clearly how to implement the function of dynamically expanding N-order tables and rows. Remember, this is just a simplified example, and it needs to be adjusted and improved according to specific needs in actual applications.

The above is the detailed content of How to use JavaScript to implement dynamic expansion of N-order Tables and Rows?. For more information, please follow other related articles on the PHP Chinese website!