HTML 在JavaScript中不使用jQuery将表格转换为数组的方法

在本文中，我们将介绍如何在JavaScript中将HTML表格转换为数组的方法，而不使用jQuery库。

阅读更多：HTML 教程

方法一：使用纯JavaScript

首先，我们可以使用纯JavaScript来实现这个功能。我们可以使用JavaScript中的DOM方法和属性来访问和操作HTML元素。

以下是具体的步骤：

获取表格元素：首先，我们需要通过使用document.getElementById()或document.querySelector()方法来获取HTML中的表格元素。例如，如果我们的表格具有id属性为”myTable”，我们可以使用以下代码获取该元素：

var table = document.getElementById("myTable");

获取表格行和单元格：一旦我们获得了表格元素，我们可以使用getElementsByTagName()方法获取所有的表格行和单元格。例如，为了获取表格中的所有行，我们可以使用以下代码：

var rows = table.getElementsByTagName("tr");

遍历表格行和单元格：现在，我们可以使用JavaScript的循环结构（如for或forEach）遍历表格行和单元格。对于每一行，我们可以再次使用getElementsByTagName()方法获取该行中的所有单元格。例如，为了获取每一行中的所有单元格，我们可以使用以下代码：

Array.from(rows).forEach(function(row){
    var cells = row.getElementsByTagName("td");
    // 在这里进行处理操作
});

获取单元格的值：在每个单元格内，我们可以使用innerHTML或textContent属性来获取单元格的值。例如，为了获取每个单元格的文本内容，我们可以使用以下代码：

Array.from(cells).forEach(function(cell){
    var value = cell.innerHTML;
    // 在这里进行处理操作
});

创建数组并存储单元格值：我们可以在遍历过程中创建一个空数组，并将每个单元格的值存储在其中。

综上所述，以下是将HTML表格转换为数组的完整示例：

var table = document.getElementById("myTable");
var rows = table.getElementsByTagName("tr");
var tableData = [];

Array.from(rows).forEach(function(row){
    var cells = row.getElementsByTagName("td");
    var rowData = [];

    Array.from(cells).forEach(function(cell){
        rowData.push(cell.innerHTML);
    });

    tableData.push(rowData);
});

console.log(tableData);

上述示例代码演示了如何将HTML表格转换为数组，并将其存储在名为tableData的数组中。

方法二：使用表格数据对象

除了使用纯JavaScript方法外，我们还可以使用HTML5中的HTMLTableElement接口提供的方法和属性来实现表格转换为数组的功能。这个接口定义了一种表示HTML表格的数据类型。

以下是具体的步骤：

获取表格元素：同样地，我们需要通过使用document.getElementById()或document.querySelector()方法来获取HTML中的表格元素。
使用HTMLTableElement的rows属性获取所有的行，然后可以使用Array.from()方法将其转换为数组。
对于每一行，我们可以使用Array.from()方法将单元格集合转换为数组，并使用Array.map()方法遍历每个单元格。
使用Array.map()方法遍历每个单元格，并返回它们的文本内容。
创建数组并存储单元格值：我们可以使用Array.map()来创建一个新的数组，并将每个单元格的值存储在其中。

综上所述，以下是使用表格数据对象将HTML表格转换为数组的完整示例：

var table = document.getElementById("myTable");
var tableData = Array.from(table.rows).map(function(row){
    return Array.from(row.cells).map(function(cell){
        return cell.textContent;
    });
});

console.log(tableData);

上述示例代码演示了如何使用表格数据对象将HTML表格转换为数组，并将其存储在名为tableData的数组中。