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

Not a duplicate, but the problem is covered with other things in that question. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Jan 22, 2018 at 10:56

Andy G · Accepted Answer · 2018-01-22 11:18:31Z

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, 2018 at 11:18

answered Jan 22, 2018 at 10:52

Andy G

19.4k5 gold badges49 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vikas Kandari · Accepted Answer · 2018-01-22 10:53:59Z

0

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>

answered Jan 22, 2018 at 10:53

Vikas Kandari

8417 silver badges11 bronze badges

4 Comments

Reinstate Monica Cellio Over a year ago

Don't copy/paste from w3schools. It's not an answer.

Vikas Kandari Over a year ago

I am saving my time thats why i copy pasted it i have also modified a little bit

Reinstate Monica Cellio Over a year ago

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.

Vikas Kandari Over a year ago

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

Simon Pasku · Accepted Answer · 2018-01-22 11:03:38Z

0

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

answered Jan 22, 2018 at 11:03

Simon Pasku

6692 gold badges6 silver badges18 bronze badges

Collectives™ on Stack Overflow

Reading Data from HTML table using Javascript

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related