Reading Data from HTML table using Javascript
Question
I'm currently busy with a project that has an html table with games and years they are launched. I'm trying to create a button that when clicked will hide any row that wasn't launched in 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.
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. 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".
Thanks
3 answers
solution1
2 ACCPTED 2018-01-22 10:52:21
getElementsByClassName returns a NodeList, a collection. 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.
Or alternatively,
var rowLength = table[0].rows.length;
Better yet, give your table an ID and use getElementById .
solution2
0 2018-01-22 10:53:59
I found it form W3schools i hope this will help
<!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>
solution3
0 2018-01-22 11:03:38
insted of var table = document.getElementsByClassName(table); use var table = document.getElementsByClassName('some class in string');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.