How to pass the Input value with Table data In Javascript

Question

Hi All I need help i'm new on Js.
I generate 4 table and 4 input field under the loop of "JSP".
My Question is how to pass the Table value with input field value both in Function

Input field value and Table value pass in "myFunction(inputvalue, table)" for filter

I add the value of input in "myFunction(this.value)" but i'm stuck. how to add the table values in that function

<div class="w3-container">
  <input class="w3-input w3-border w3-padding" type="text" placeholder="Search for names.." id="myInput" onkeyup="myFunction(this.value)">

  <table class="w3-table-all" id="myTable">
    <tr>
      <th style="width:60%;">Name</th>
      <th style="width:40%;">Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Berglunds snabbkop</td>
      <td>Sweden</td>
    </tr>
  </table>
</div>

<script>
function myFunction(searchValue, TableId) {
}
</script>

Mamun · Accepted Answer · 2018-10-17T05:22:51.117

You can pass the id of the table as the second parameter so that you can refer that inside the function body.

onkeyup="myFunction(this.value, 'myTable')"

Try the following way:

function myFunction(searchValue, TableId) {
  var input, filter, table, tr, td, i;
  filter = searchValue.toUpperCase();
  table = document.getElementById(TableId);
  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";
      }
    }       
  }
}

<div class="w3-container">
  <input class="w3-input w3-border w3-padding" type="text" placeholder="Search for names.." id="myInput" onkeyup="myFunction(this.value, 'myTable')">

  <table id="myTable">
    <tr class="header">
      <th style="width:60%;">Name</th>
      <th style="width:40%;">Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Berglunds snabbkop</td>
      <td>Sweden</td>
    </tr>
  </table>
</div>

score 2 · Answer 2 · answered Oct 16 '18 at 09:29

You could just pass the id of the table and use the document API to use the table.

Here is an example using document.querySelectorAll() for your problem:

function myFunction(searchValue, TableId) {
  var entries = document.querySelectorAll("#"+TableId+" > tbody > tr");
  var re = new RegExp(searchValue, "i");
  for(var i = 0; i < entries.length; ++i) {
    var name = entries[i].getElementsByTagName("td")[0].innerHTML;
    entries[i].style.display = name.match(re) ? "" : "none";
  }
}

<div class="w3-container">
  <input class="w3-input w3-border w3-padding" type="text"
   placeholder="Search for names.." id="myInput"
   onkeyup="myFunction(this.value, 'myTable')">

  <table class="w3-table-all" id="myTable">
    <thead>
      <tr>
        <th style="width:60%;">Name</th>
        <th style="width:40%;">Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Berglunds snabbkop</td>
        <td>Sweden</td>
      </tr>
    </tbody>
  </table>
</div>

score 0 · Answer 3 · answered Oct 16 '18 at 09:12

You could either do something like this:

function myFunction(searchValue, TableId) {
  console.log(document.getElementById("myTable").innerHTML.search(searchValue) > 0);
}

This would check if the search string is in the table and output true or false.

Or you could do it with jQuery, then this might help. (Possible duplicate of linked Question, I cannot comment yet. :/)

How to pass the Input value with Table data In Javascript

3 Answers3