使用 JavaScript 从 HTML 表中读取数据

╰+攻爆jí腚メ 2023-10-01 18:58 23阅读 0赞

如果您仍在使用 HTML <table> 在您的网页上显示数据，那么这篇文章及其示例将会很有用。我之前发表过一篇文章，解释[了如何使用 JavaScript 将 JSON 数据动态转换为 HTML 表格][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() 方法][document.getElementById_]创建表的对象。一旦创建了对象，我就可以访问表的所有属性。  
  
接下来，我正在运行一个for 循环来读取表格的每一行。但是，我忽略了第一行，因为它有表头。因此，在for循环中，我将值1分配给了变量i。

**必读：** [如何在没有插件的情况下使用 JavaScript 将整个 HTML 表格转换为 PDF 文档][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()][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。这也很简单。

谢谢阅读。☺

[JavaScript _ JSON _ HTML]: https://www.encodedna.com/javascript/populate-json-data-to-html-table-using-javascript.htm
[document.getElementById_]: https://www.encodedna.com/javascript/document/getelementbyid-method.htm
[JavaScript _ HTML _ PDF]: https://www.encodedna.com/javascript/convert-html-table-to-pdf-using-javascript-without-a-plugin.htm