在JavaScript中,HTML DOM(文档对象模型)允许你通过JavaScript来操作HTML文档的元素。对于表格(<table>)中的行(<tr>),你可以使用HTMLTableRowElement对象来进行操作。

以下是一个简单的例子,说明如何使用JavaScript和HTML DOM来访问和操作表格行:
<!DOCTYPE html>
<html>

<head>
    <title>Table Row Example</title>
</head>

<body>
    <table id="myTable">
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1, Cell 1</td>
                <td>Row 1, Cell 2</td>
                <td>Row 1, Cell 3</td>
            </tr>
            <tr>
                <td>Row 2, Cell 1</td>
                <td>Row 2, Cell 2</td>
                <td>Row 2, Cell 3</td>
            </tr>
        </tbody>
    </table>

    <script>
        // 获取表格
        var table = document.getElementById("myTable");

        // 获取表格的第一个 tbody(在实际应用中可能需要根据实际情况调整)
        var tbody = table.getElementsByTagName("tbody")[0];

        // 获取所有行
        var rows = tbody.getElementsByTagName("tr");

        // 遍历行并输出每行的内容
        for (var i = 0; i < rows.length; i++) {
            var cells = rows[i].cells;

            console.log("Row " + (i + 1) + ":");
            for (var j = 0; j < cells.length; j++) {
                console.log("  Cell " + (j + 1) + ": " + cells[j].innerHTML);
            }
        }
    </script>
</body>

</html>

在这个例子中,首先通过getElementById方法获取表格元素,然后通过getElementsByTagName方法获取表格的第一个tbody元素。接着,通过getElementsByTagName方法获取所有的行(<tr>),然后通过遍历行和单元格,可以获取并输出每个行和单元格的内容。


转载请注明出处:http://www.pingtaimeng.com/article/detail/6234/JavaScript 和 HTML DOM