CODEWITHSUNDEEP
javascript
Nabeel Ahmed
Nabeel Ahmed

Reputation: 267

How to pass the Input value with Table data In Javascript

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>

Upvotes: 1

Views: 2583

Answers (3)

Mamun
Mamun

Reputation: 68943

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>

Upvotes: 2

Chocolord
Chocolord

Reputation: 493

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>

Upvotes: 2

ColdIV
ColdIV

Reputation: 1104

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. :/)

Upvotes: 0

Related Questions