如何在Javascript中使用表格数据传递输入值答案

【问题标题】：How to pass the Input value with Table data In Javascript如何在Javascript中使用表格数据传递输入值
【发布时间】：2019-03-20 18:21:38
【问题描述】：

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

输入字段值和表格值传入“myFunction(inputvalue, table)" 用于过滤器

我在“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>

【问题讨论】：

标签： javascript

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

你可以这样做：

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

这将检查搜索字符串是否在表中并输出真假。

或者你可以用 jQuery 来做，那么this 可能会有所帮助。（链接问题可能重复，我还不能发表评论。：/）

【讨论】：