Table insertRow() 方法

什么是 insertRow() 方法

insertRow() 方法是 HTML 表格元素的一个内置方法，用于在表格中插入新的行（<tr>元素）。通过调用该方法，我们可以在指定位置插入新的行，从而动态地修改表格的内容。

如何使用 insertRow() 方法

要使用 insertRow() 方法，首先需要获取到要操作的表格元素，然后调用该方法。下面是一个简单的示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>Table insertRow() 方法示例</title>
</head>
<body>
    <table id="myTable">
        <tr>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
        </tr>
    </table>

    <button onclick="insertRow()">插入新行</button>

    <script>
        function insertRow() {
            var table = document.getElementById("myTable");
            var row = table.insertRow(1); // 在第二行之前插入新行
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            cell1.innerHTML = "新行第一列";
            cell2.innerHTML = "新行第二列";
        }
    </script>
</body>
</html>

在上面的示例中，我们首先创建了一个包含两行的表格，并在页面上添加了一个按钮。当用户点击按钮时，会调用 insertRow() 方法，在第二行之前插入一行新的数据，并设置该行的内容。

insertRow() 方法的参数

insertRow() 方法接受一个参数，即要插入行的位置。该参数是一个整数，表示在表格中的第几行之前插入新行。如果传入的参数为 0，则会在表格的开头插入新行；如果传入的参数大于表格中已有的行数，则新行会被插入到表格的末尾。

总结

通过使用 insertRow() 方法，我们可以方便地在表格中插入新的行，从而实现动态修改表格内容的功能。这种方法在处理需要频繁更新的表格数据时非常有用，希望本文对大家有所帮助！