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

Possible duplicate of [getElementsByClassName not working](https://stackoverflow.com/questions/3349332/getelementsbyclassname-not-working) — Reinstate Monica Cellio, Jan 22 '18 at 10:55
Not a duplicate, but the problem is covered with other things in that question. — Reinstate Monica Cellio, Jan 22 '18 at 10:56

Andy G · Accepted Answer · 2018-01-22T11:18:31.233

2

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.

edited Jan 22 '18 at 11:18

answered Jan 22 '18 at 10:52

Andy G

19,232
5
47
69

score 0 · Answer 2 · answered Jan 22 '18 at 10:53

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>

I am saving my time thats why i copy pasted it i have also modified a little bit — Vikas Kandari, Jan 22 '18 at 10:58
If you want to save time then do not post copy/paste from w3schools. It is a terrible resource where code is very often wrong. — Reinstate Monica Cellio, Jan 22 '18 at 11:02
Yes in some cases there codes are wrong but i always give best solutions suitable to me and for person who needed also if you are saying to not copy paste from w3schools so i will not .Thanks — Vikas Kandari, Jan 22 '18 at 11:27

score 0 · Answer 3 · answered Jan 22 '18 at 11:03

0

insted of var table = document.getElementsByClassName(table); use var table = document.getElementsByClassName('some class in string');

answered Jan 22 '18 at 11:03

Simon Pasku

539
2
4
17

Reading Data from HTML table using Javascript

3 Answers3