使用 Javascript 在 HTML 表中搜索答案

【问题标题】：Search in a HTML table with Javascript使用 Javascript 在 HTML 表中搜索
【发布时间】：2017-11-29 21:29:04
【问题描述】：

我正在尝试在 HTML 页面上创建一个搜索字段，该字段会扫描表格并打开表格中该条目的相应 href。

例如，如果您将Xbox 输入并提交到搜索字段中，它将打开与Xbox 关联的链接(product.html)。

function tableSearch() {
  var eingabe = document.getElementById('input').innerHTML;
  return alert($("table td:contains(eingabe)")
    .children("a")
    .attr("href"));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form onsubmit="tableSearch()">
  Product name: <br> <input type="text" name="input">
  <br>
  <input type="submit" value="submit">
</form>

<table class="firsttable" align="center">
  <tr>
    <td>Camera</td>
    <td>239 g</td>
    <td>10,8cm* 5,5cm * 5,5cm</td>
    <td>Black</td>
    <td>10,99 &euro;</td>
  </tr>

  <tr>
    <td>Monitor</td>
    <td>2,8 kg</td>
    <td>17,3 inch</td>
    <td>Black</td>
    <td>449 &euro;</td>
  </tr>

  <tr>
    <td><a href="product.html">Xbox</a> </td>
    <td>3,6 kg</td>
    <td>43,3cm * 35,7cm * 10,6cm</td>
    <td>Black</td>
    <td>299,99 &euro;</td>
  </tr>

</table>

我尝试更改 JavaScript 代码，但无法正常工作。希望这里有人可以提供帮助！

【问题讨论】：

您的input 需要使用.value 而不是.innerHTML。
注意：align 属性已过时。

标签： javascript html input html-table href

【解决方案1】：

您需要使用.value 而不是.innerHTML 和input 来获得它的值。

通过写return alert("")，您不会返回任何东西，您需要单击此a 链接而不是提醒它是href 以移动到产品页面。

这应该是你的功能：

function tableSearch() {
  var eingabe = document.getElementById('input').value;
  $("table td:contains(" + eingabe + ")").find("a").click();
}

演示：

function tableSearch() {
  var eingabe = document.getElementById('input').value;
  $("table td:contains(" + eingabe + ")").find("a").click();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<form onsubmit="tableSearch()"> Product name: <br> <input type="text" name="input"> <br> <input type="submit" value="submit"> </form>

<table>
  <tr>
    <td>Camera</td>
    <td>239 g</td>
    <td>10,8cm* 5,5cm * 5,5cm</td>
    <td>Black</td>
    <td>10,99 &euro;</td>
  </tr>
  <tr>
    <td>Monitor</td>
    <td>2,8 kg</td>
    <td>17,3 inch</td>
    <td>Black</td>
    <td>449 &euro;</td>
  </tr>
  <tr>
    <td><a href="product.html">Xbox</a></td>
    <td>3,6 kg</td>
    <td>43,3cm * 35,7cm * 10,6cm</td>
    <td>Black</td>
    <td>299,99 &euro;</td>
  </tr>
</table>

【讨论】：

所以我的 HTML 页面上有这个表单：
产品名称：

在提交时，我正在尝试执行该功能。这就是我的函数现在的样子： function tableSearch() { var eingabe = document.getElementById('input').value $("table td:contains(" + eingabe + ")").find("a" ）。点击（）;是否还有任何逻辑错误，因为在我看来一切都是正确的？
@PerKosmos 我在我的回答中更新了演示，它运行良好。
我刚刚将您的代码添加到我的代码中，但它仍然无法正常工作。我究竟做错了什么？我有搜索框，每当我在其中输入内容时，它都会在 URL 栏中将其添加为“input=Xbox”……我错过了什么吗？将你的函数复制到我的 JS 脚本中
@PerKosmos 它应该可以工作，也许你正在做别的事情，你能用你的新代码做一个Fiddle吗？
@PerKosmos 你需要在复制小提琴的路径之前点击Save。

【解决方案2】：

由于您使用的是 jQuery，您可以附加 input 事件来跟踪用户输入：

$('input').on('input', function() {
  var eingabe = $(this).val();

  var href = $("table td:contains(" + eingabe + ")").find("a").attr("href");

  location.href = href; // will redirect you to the page in your href
})

代码：

$('input').on('input', function() {
  var eingabe = $(this).val();

  console.log($("table td:contains(" + eingabe + ")").find("a").attr("href"));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input />

<table>
  <tr>
    <td>Camera</td>
    <td>239 g</td>
    <td>10,8cm* 5,5cm * 5,5cm</td>
    <td>Black</td>
    <td>10,99 &euro;</td>
  </tr>
  <tr>
    <td>Monitor</td>
    <td>2,8 kg</td>
    <td>17,3 inch</td>
    <td>Black</td>
    <td>449 &euro;</td>
  </tr>
  <tr>
    <td><a href="product.html">Xbox</a></td>
    <td>3,6 kg</td>
    <td>43,3cm * 35,7cm * 10,6cm</td>
    <td>Black</td>
    <td>299,99 &euro;</td>
  </tr>
</table>

【讨论】：