使用Javascript从HTML表读取数据
[英]Reading Data from HTML table using Javascript
问题描述
I'm currently busy with a project that has an html table with games and years they are launched. 
我目前正忙于一个带有html表的项目，其中包含游戏和发布年份。 I'm trying to create a button that when clicked will hide any row that wasn't launched in 2016. 我正在尝试创建一个按钮，单击该按钮将隐藏2016年未启动的任何行。
So my thoughts behind this process are that I'll create a forloop to go through each row and column to find the year value and if it's 2016 leave it alone, if not, hide it. 因此，我的想法是，我将创建一个forloop来遍历每一行和每一列，以查找年份值；如果是2016年，则将其保留；否则，将其隐藏。
However I'm having an issue on the looping part. 但是我在循环部分有问题。
<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>
I've got two different for loops here and neither of them seem to work. 我在这里有两个不同的for循环，它们似乎都不起作用。 The table is created slightly about this with the same script with the class table attached to it. 该表是使用与该表相连的相同脚本略微创建的。
When running the code and hitting the button I do see "Table Found" in the console but after that I get a "Cannot read property 'length' of undefined at GameSearchLoop". 当运行代码并单击按钮时，我在控制台中确实看到了“找到表”，但是此后我得到了“无法读取GameSearchLoop上未定义的属性'length'的信息”。
Thanks 谢谢
3 个解决方案
解决方案1
2 已采纳 2018-01-22 10:52:21
getElementsByClassName returns a NodeList, a collection. getElementsByClassName返回一个NodeList，一个集合。 You need the first of these elements: 您需要这些元素中的第一个：
var table = document.getElementsByClassName(table)[0];
assuming that table is in the first instance a variable containing a class-name, and that your table is the first, or only, one of these. 假设该table在第一个实例中是一个包含类名的变量，并且您的表是其中第一个或唯一一个。
Or alternatively, 或者，
var rowLength = table[0].rows.length;
Better yet, give your table an ID and use getElementById . 更好的是，给表一个ID并使用getElementById 。
解决方案2
0 2018-01-22 10:53:59
I found it form W3schools i hope this will help 我从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>
解决方案3
0 2018-01-22 11:03:38
insted of var table = document.getElementsByClassName(table); 插入var table = document.getElementsByClassName(table); use var table = document.getElementsByClassName('some class in string'); 使用var table = document.getElementsByClassName('some class in string');
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.