使用Javascript从HTML表读取数据

Question

我目前正忙于一个带有html表的项目，其中包含游戏和发布年份。 我正在尝试创建一个按钮，单击该按钮将隐藏2016年未启动的任何行。

因此，我的想法是，我将创建一个forloop来遍历每一行和每一列，以查找年份值；如果是2016年，则将其保留；否则，将其隐藏。

但是我在循环部分有问题。

<script>
    function GameSearchLoop() {
        var table = document.getElementsByClassName(table);

        if (table == null) {
            console.log("Table Not Found");
        }
        else {
            console.log("Table Found");
        }

        var rowLength = table.rows.length;
        for (var z = 0; z < rowLength; z++) {
            var cells = table.rows.item(z).cells;
            var cellLength = cells.length;
            console.log("Row Checked");
            for (var x = 0; x < cellLength; x++) {
                console.log("Column Checked");
            }
        }

        //for (var r = 0, n = table.rows.length; r < n; r++) {
        //    console.log("Row Checked");
        //    for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
        //        alert(table.rows[r].cells[c].innerHTML);
        //        console.log("Column Checked");
        //    }
        //}


    }
</script>

我在这里有两个不同的for循环，它们似乎都不起作用。 该表是使用与该表相连的相同脚本略微创建的。

当运行代码并单击按钮时，我在控制台中确实看到了“找到表”，但是此后我得到了“无法读取GameSearchLoop上未定义的属性'length'的信息”。

谢谢

Answer 1

getElementsByClassName返回一个NodeList，一个集合。 您需要这些元素中的第一个：

var table = document.getElementsByClassName(table)[0];

假设该table在第一个实例中是一个包含类名的变量，并且您的表是其中第一个或唯一一个。

或者，

var rowLength = table[0].rows.length;

更好的是，给表一个ID并使用getElementById 。

Answer 2

我从W3schools找到了它，希望对您有所帮助

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } #myTable { border-collapse: collapse; width: 100%; border: 1px solid #ddd; font-size: 18px; } #myTable th, #myTable td { text-align: left; padding: 12px; } #myTable tr { border-bottom: 1px solid #ddd; } #myTable tr.header, #myTable tr:hover { background-color: #f1f1f1; } </style> </head> <body> <h2>I picked it from W3schools</h2> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> <table id="myTable"> <tr class="header"> <th style="width:60%;">Year</th> <th style="width:40%;">Country</th> </tr> <tr> <td>2016</td> <td>Germany</td> </tr> <tr> <td>2017</td> <td>Sweden</td> </tr> <tr> <td>2016</td> <td>UK</td> </tr> <tr> <td>2018</td> <td>Germany</td> </tr> <tr> <td>2019</td> <td>Canada</td> </tr> <tr> <td>2010</td> <td>Italy</td> </tr> <tr> <td>2016</td> <td>UK</td> </tr> <tr> <td>2013</td> <td>France</td> </tr> </table> <script> function myFunction() { var input, filter, table, tr, td, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; if (td) { if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } } </script> </body> </html>

Answer 3

插入var table = document.getElementsByClassName(table); 使用var table = document.getElementsByClassName('some class in string');

使用Javascript从HTML表读取数据

问题描述

3 个解决方案

解决方案1
2 已采纳 2018-01-22 10:52:21

解决方案2
0 2018-01-22 10:53:59

解决方案3
0 2018-01-22 11:03:38

使用Javascript从HTML表读取数据

问题描述

3 个解决方案

解决方案1 2 已采纳 2018-01-22 10:52:21

解决方案2 0 2018-01-22 10:53:59

解决方案3 0 2018-01-22 11:03:38

解决方案1
2 已采纳 2018-01-22 10:52:21

解决方案2
0 2018-01-22 10:53:59

解决方案3
0 2018-01-22 11:03:38