A Comprehensive Guide to Extracting Data from HTML Tables in JavaScript

In web development, extracting data from HTML tables is a common task. This article builds on the primary reference of Answer 1, supplemented by Answer 2's modern approach, to offer a complete solution.

Basic Traversal Method

This method employs JavaScript's DOM operations and loop logic, implemented through three main steps. First, use the document.getElementById function to retrieve the table element, such as var table = document.getElementById('displayTable');. Second, access the table's rows property to obtain the row count, and use a for loop to iterate through each row. Within the loop, get the cells of the current row via rows.item(i).cells, then iterate through each cell to extract content. For example, use oCells.item(j).innerHTML to retrieve the HTML text of a cell, or innerText for plain text. The key lies in understanding the DOM structure, as HTML table elements like <tr> and <td> are represented as objects in JavaScript. Below is a rewritten example code:

// Get the table element
var table = document.getElementById('myTable');
// Get the number of rows
var rowLength = table.rows.length;
// Iterate through each row
for (var i = 0; i < rowLength; i++) {
    // Get the cells of the current row
    var cells = table.rows.item(i).cells;
    // Get the number of cells
    var cellLength = cells.length;
    // Iterate through each cell
    for (var j = 0; j < cellLength; j++) {
        // Extract cell content
        var cellValue = cells.item(j).innerHTML;
        console.log(cellValue);
    }
}

In practical applications, if data needs to be extracted from a specific column, such as one named "Limit", this can be achieved by determining the column index. For instance, assuming the "Limit" column is at the first position, modify the code to var cellValue = cells.item(0).innerText;, using innerText to avoid HTML tag interference.

Using ES6 Array Methods

With the widespread adoption of ES6, JavaScript offers more concise array operations. This method leverages the map function and spread operator to transform table data into a two-dimensional array. Based on Answer 2, first retrieve the table element, then convert rows into an array using Array.from or the spread syntax, and apply map to iterate through each row. Within each row, convert cells to an array and use another map to extract innerText. This approach is more declarative and results in cleaner code. Below is a rewritten example code:

// Get the table element
let table = document.getElementById('myTable');
// Convert table data into a two-dimensional array
let data = Array.from(table.rows).map(row => 
    Array.from(row.cells).map(cell => cell.innerText)
);
console.log(data);

This code uses Array.from to convert DOM collections into arrays, helping avoid index issues during direct traversal. Through this method, data is stored in the data array, where each row is a subarray representing corresponding cell values. This is particularly useful for handling large tables or scenarios requiring complex data manipulations.

Conclusion and Recommendations

The basic traversal method is applicable across all JavaScript environments, especially when considering backward compatibility, as it uses fundamental DOM APIs. In contrast, the ES6 array method is better suited for modern development, offering improved readability and conciseness. In practical development, it is recommended to choose based on project needs: use the basic method if maintaining support for older browsers is necessary; consider the ES6 method if the project adopts ES6 or higher versions. The key is to understand the hierarchical structure of the DOM, such as the <tr> and <td> tags in tables, and adhere to JavaScript's array operation principles. By employing these methods, developers can efficiently extract and process data from HTML tables, enhancing the functionality of web applications.