javascript - 如何在 Javascript 中使用表数据传递输入值

Question

大家好，我需要帮助，我是 Js 的新手。
我在“JSP”的循环下生成4 个表和4 个输入字段。
我的问题是如何在函数中传递带有输入字段值的表值

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

我在“myFunction(this.value)”中添加了输入值，但我卡住了。如何在该函数中添加表值

<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>

Answer 1

您可以将表的 ID 作为第二个参数传递，以便您可以在函数体内引用它。

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

尝试以下方式:

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>