使用 JavaScript 从 HTML 表中读取数据

最新推荐文章于 2024-04-11 20:32:55 发布

allway2

最新推荐文章于 2024-04-11 20:32:55 发布

阅读量3.3k

点赞数 3

文章标签： javascript html json

本文链接：https://blog.csdn.net/allway2/article/details/122981707

版权

如果您仍在使用 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。

必读： 如何在没有插件的情况下使用 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。这也很简单。

谢谢阅读。☺

allway2

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
使用 JavaScript 从 HTML 表中读取数据

如果您仍在使用 HTML <table> 在您的网页上显示数据，那么这篇文章及其示例将会很有用。我之前发表过一篇文章，解释了如何使用 JavaScript 将 JSON 数据动态转换为 HTML 表格。现在，我在这里分享一个简单的脚本，展示如何使用 JavaScript 从 HTML 表中读取数据。首先，我将创建一个带有标题和几行的小表格。数据是硬编码的。标记<!DOCTYPE html><html> <head>
复制链接

扫一扫