如果您仍在使用 HTML <table> 在您的网页上显示数据,那么这篇文章及其示例将会很有用。我之前发表过一篇文章,解释了如何使用 JavaScript 将 JSON 数据动态转换为 HTML 表格。现在,我在这里分享一个简单的脚本,展示如何使用 JavaScript 从 HTML 表中读取数据。
首先,我将创建一个带有标题和几行的小表格。数据是硬编码的。
标记
<!DOCTYPE html>
<html>
<head>
<title>Read Data from HTML Table uisng JavaScript</title>
<style>
table, th, td
{
border: solid 1px #DDD;
border-collapse: collapse;
padding: 2px 3px;
text-align: center;
}
th {
font-weight:bold;
}
</style>
</head>
<body>
<table id="empTable">
<tr>
<th>ID</th>
<th>Employee Name</th>
<th>Age</th>
</tr>
<tr>
<td>01</td>
<td>Alpha</td>
<td>37</td>
</tr>
<tr>
<td>02</td>
<td>Bravo</td>
<td>29</td>
</tr>
</table>
<p><input type="button" id="bt" value="Show Table Data" onclick="showTableData()" /></p>
<p id="info"></p>
</body>
<script>
function showTableData() {
document.getElementById('info').innerHTML = "";
var myTab = document.getElementById('empTable');
// LOOP THROUGH EACH ROW OF THE TABLE AFTER HEADER.
for (i = 1; i < myTab.rows.length; i++) {
// GET THE CELLS COLLECTION OF THE CURRENT ROW.
var objCells = myTab.rows.item(i).cells;
// LOOP THROUGH EACH CELL OF THE CURENT ROW TO READ CELL VALUES.
for (var j = 0; j < objCells.length; j++) {
info.innerHTML = info.innerHTML + ' ' + objCells.item(j).innerHTML;
}
info.innerHTML = info.innerHTML + '<br />'; // ADD A BREAK (TAG).
}
}
</script>
</html>
当有人按下按钮时,它将调用该函数。我正在使用document.getElementById() 方法创建表的对象。一旦创建了对象,我就可以访问表的所有属性。
接下来,我正在运行一个for 循环来读取表格的每一行。但是,我忽略了第一行,因为它有表头。因此,在for循环中,我将值1分配给了变量i。
接下来,我正在运行一个for 循环来读取表格的每一行。但是,我忽略了第一行,因为它有表头。因此,在for循环中,我将值1分配给了变量i。
必读: 如何在没有插件的情况下使用 JavaScript 将整个 HTML 表格转换为 PDF 文档
稍后在第一个循环中,我将获取每一行的单元格集合。集合(对象)提供一行中每个单元格的属性和值。为了从每个单元格中提取值,我正在运行另一个for循环。
读取特定列数据
如果要从特定列中提取数据,则只需在第二个循环中为变量j赋值即可。每列或 <th> 都有一个从0开始的唯一索引值。
例如,如果要显示Age列的值,则可以将值2分配给变量j。像这样,
for (var j = 2; j < objCells.length; j++) {
info.innerHTML = info.innerHTML + ' ' + objCells.item(j).innerHTML;
}
您得到的输出是 37 和 29(来自上面的示例)。
使用“cellIndex”属性读取列数据
还有另一种方法可以获取特定列的单元格值,而无需对数字进行硬编码。您可以为标记中的每个标题 (<th>)分配唯一的 id ,并使用document.getElementById()方法获取索引值。
标记
<html>
<head>
<title>Read Data from HTML Table uisng JavaScript</title>
<style>
table, th, td
{
border: solid 1px #DDD;
border-collapse: collapse;
padding: 2px 3px;
text-align: center;
}
th {
font-weight:bold;
}
</style>
</head>
<body>
<table id="empTable">
<tr>
<th id="id">ID</th>
<th id="emp">Employee Name</th>
<th id="age">Age</th>
</tr>
<tr><td>01</td><td>Alpha</td><td>37</td></tr>
<tr><td>02</td><td>Bravo</td><td>29</td></tr>
<tr><td>03</td><td>Charlie</td><td>32</td></tr>
</table>
<p><select name="select" id="opt">
<option value="">--Select a Value--</option>
<option value="id">ID</option>
<option value="emp">Employee Name</option>
<option value="age">Age</option></select>
</p>
<input type="button" id="bt" value="Show Data" onclick="showTableData()" />
<p id="info" style="font-style:italic;"></p>
</body>
<script>
function showTableData() {
document.getElementById('info').innerHTML = "";
var myTab = document.getElementById('empTable');
var opt = document.getElementById("opt").value;
var index = document.getElementById(opt).cellIndex;
for (i = 1; i < myTab.rows.length; i++) {
var objCells = myTab.rows.item(i).cells;
for (var j = index; j <= index; j++) {
info.innerHTML = info.innerHTML + ' ' + objCells.item(j).innerHTML;
}
info.innerHTML = info.innerHTML + '<br />';
}
}
</script>
</html>
就是这样。希望您发现示例和帖子有用。您可以使用 jQuery 进一步简化该过程。然而,在这篇文章中,我试图专注于 JavaScript。这也很简单。
谢谢阅读。☺