Question

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

输入字段值和表值传入“ myFunction（inputvalue，表格）”

我在“ 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作为第二个参数传递，以便可以在函数体内引用该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>

Answer 2

您可以只传递表的ID，然后使用document API来使用表。

以下是使用document.querySelectorAll()解决问题的示例：

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>

Answer 3

您可以执行以下操作：

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

这将检查搜索字符串是否在表中并输出true或false。

或者您可以使用jQuery完成操作，那么this可能会有所帮助。（可能存在链接的问题的重复项，我无法发表评论。：/）

如何在Javascript中将输入值与表数据一起传递

3 个答案: