在javascript中循环遍历表格打印(1)

📌 相关文章

📜 在javascript中循环遍历表格打印(1)

📅 最后修改于: 2023-12-03 15:23:23.647000 🧑 作者: Mango

在JavaScript中循环遍历表格打印

本文将介绍如何在JavaScript中循环遍历表格并打印出其中的内容。

获取表格对象

在JavaScript中，获取表格对象有多种方法，其中最常用的方法是通过document.getElementById方法获取指定ID的表格对象。例如：

var table = document.getElementById('mytable');

遍历表格

获取表格对象后，我们可以使用table.rows属性获取表格所有行的集合。然后可以使用for循环遍历每一行，再使用cells属性获取每一行的所有单元格，最后打印出单元格中的内容。代码如下：

var table = document.getElementById('mytable');
for(var i=0; i<table.rows.length; i++) {
    var row = table.rows[i];
    for(var j=0; j<row.cells.length; j++) {
        var cell = row.cells[j];
        console.log(cell.innerText);
    }
}

上述代码中innerText属性可以获取单元格中的纯文本内容，如果希望获取格式化后的HTML内容，可以使用innerHTML属性。

完整示例

下面是一个完整的示例，将表格中的内容打印在网页中：

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript遍历表格示例</title>
    <meta charset="UTF-8">
    <script type="text/javascript">
        function printTable() {
            var table = document.getElementById('mytable');
            var content = '';
            for(var i=0; i<table.rows.length; i++) {
                var row = table.rows[i];
                for(var j=0; j<row.cells.length; j++) {
                    var cell = row.cells[j];
                    content += cell.innerText + ' ';
                }
                content += '<br/>';
            }
            document.getElementById('result').innerHTML = content;
        }
    </script>
</head>
<body>
    <table id="mytable">
        <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
        <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
        <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
    </table>
    <button onclick="printTable()">打印表格内容</button>
    <div id="result"></div>
</body>
</html>

以上代码中，我们新增了一个printTable函数，用于遍历表格并将内容打印在网页中。点击“打印表格内容”按钮即可执行该函数。