📅  最后修改于: 2023-12-03 15:23:23.647000             🧑  作者: Mango
本文将介绍如何在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
函数,用于遍历表格并将内容打印在网页中。点击“打印表格内容”按钮即可执行该函数。