Table search capability using Javascript

Question

Hello, I'm trying to debug the Java Script function that can be found in snippet below.

Function purpose:

• Add search capability in several table columns by adding a text field above each column name.
• The function is meant to filter all table rows that are not containing all user's input string in each column.

Can't figure out why my table search function is not working properly. Please run snippet below to mimic the problem.

function myFunction() {
  var inputs, table, tr, i, j, inputValue, txtValue, showRow;
  inputs = document.getElementsByTagName("input");
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 1; i < tr.length; i++) {
    showRow = true;
    for (j = 1; j < tr[i].cells.length; j++) {
      inputValue = inputs[j - 1].value
      txtValue = tr[i].cells[j].textContent || tr[i].cells[j].innerText;
      if (inputValue != "" && txtValue.toUpperCase().indexOf(inputValue.toUpperCase()) == -1) {
        showRow = false;
        break;
      }
    }
    tr[i].style.display = showRow ? "" : "none";
  }
}

body {
      background-color: #F8F8F8;
    }
    p.a {
    white-space: nowrap;
    }

    h2 {
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    }

    table {
    margin-left: auto;
    margin-right: auto;
    }

    table,
    th,
    td {
    border: 1px solid black;
    border-collapse: collapse;
    }

    th,
    td {
    padding: 5px;
    text-align: left;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 90%;
    white-space: nowrap;
    }

    table tbody tr:hover {
    background-color: #dddddd;
    }

    .wide {
    width: 90%;
    }
    .bgred{
    background-color: red;
    }
  .bggreen{
    background-color: green;
    }
  .bgyellow{
    background-color: yellow;
    }
    .bgwhite{
      background-color: white;
    }

<h2> Report </h2> 
	<table border="1" class="dataframe wide" id="myTable"> 
	<thead> 
	<tr style="text-align: right;"> 
	<th></th> 
	<th><input type="text" onkeyup="myFunction()"><br>Col1</th> 
	<th><input type="text" onkeyup="myFunction()"><br>Col2</th> 
	<th><input type="text" onkeyup="myFunction()"><br>Col3</th> 
	<th><input type="text" onkeyup="myFunction()"><br>Col4</th> 
	<th>RAW_LINK</th> 
	<th>LINK</th> 
	<th><input type="text" onkeyup="myFunction()"><br>RULE</th> 
	<th>WW 51</th> 
	<th>WW 50</th> 
	<th>WW 49</th> 
	<th>WW 48</th> 
	<th>WW 47</th> 
	<th>WW 46</th> 
	<th>WW 45</th> 
	<th>WW 44</th> 
	<th>WW 43</th> 
	<th>WW 42</th> 
	<th>WW 41</th> 
	<th>WW 40</th> 
	<th>WW 39</th> 
	<th>WW 38</th> 
	<th>WW 37</th> 
	<th>WW 36</th> 
	<th>WW 35</th> 
	<th>WW 34</th> 
	</tr> 
	</thead> 
	<tbody> 
	<tr> 
	<th>0</th> 
	<td>SomeVal</td> 
	<td> SomeVal2</td> 
	<td> SomeVal3</td> 
	<td> SomeVal4</td> 
	<td onclick="window.open('Google.com')">Click Here</td> 
	<td onclick="window.open(''Amazon.com')">Click Here</td> 
	<td>OOC for 2 weeks</td> 
	<td>-8.30</td> 
	<td>-12.41</td> 
	<td>NaN</td> 
	<td>-5.24</td> 
	<td>-10.25</td> 
	<td>-5.20</td> 
	<td>-5.05</td> 
	<td>-19.86</td> 
	<td>-15.55</td> 
	<td>-17.60</td> 
	<td>0.61</td> 
	<td>-0.06</td> 
	<td>0.11</td> 
	<td>-0.00</td> 
	<td>0.59</td> 
	<td>1.71</td> 
	<td>-0.17</td> 
	<td>NaN</td> 
	</tr> 
	<tr> 
	<th>1</th> 
	<td> SomeVal4</td> 
	<td> SomeVal45</td> 
	<td> SomeVal6</td> 
	<td> SomeVal7</td> 
	<td onclick="window.open(''Google.com')">Click Here</td> 
	<td onclick="window.open(' Amazon.com')">Click Here</td> 
	<td>OOC</td> 
	<td>7.69</td> 
	<td>0.36</td> 
	<td>-1.28</td> 
	<td>-1.57</td> 
	<td>0.66</td> 
	<td>1.63</td> 
	<td>0.40</td> 
	<td>-0.43</td> 
	<td>-0.60</td> 
	<td>0.66</td> 
	<td>-0.17</td> 
	<td>-0.86</td> 
	<td>-1.20</td> 
	<td>0.73</td> 
	<td>0.30</td> 
	<td>-0.42</td> 
	<td>-1.19</td> 
	<td>-0.26</td> 
	</tr> 
	<tr> 
	<th>2</th> 
	<td>SomeVa</td> 
	<td>SomeVa12</td> 
	<td>SomeVa3</td> 
	<td>SomeVa</td> 
	<td onclick="window.open(''Google.com')">Click Here</td> 
	<td onclick="window.open(''Google.com')">Click Here</td> 
	<td>OOC for 2 weeks</td> 
	<td>-4.65</td> 
	<td>-3.58</td> 
	<td>NaN</td> 
	<td>-0.82</td> 
	<td>-1.43</td> 
	<td>-3.29</td> 
	<td>-3.76</td> 
	<td>NaN</td> 
	<td>NaN</td> 
	<td>NaN</td> 
	<td>NaN</td> 
	<td>NaN</td> 
	<td>NaN</td> 
	<td>NaN</td> 
	<td>NaN</td> 
	<td>NaN</td> 
	<td>NaN</td> 
	<td>NaN</td> 
	</tr> 
	</tbody> 
	</table>

Function purpose:

Add search capability in several table columns. The function is meant to filter all table rows that are not containing user's input string in each column. Can't figure out why my table search function is not working properly.

Answer 1

In some <th> elements you don't have an <input> element, therefore your script will fail when doing inputValue = inputs[j - 1].value; since there's no such inputs[j - 1].

For your script to work every TH element should have an input. Either hide it (doable using the hidden attribute or with a CSS class) or change the JS accordingly.