javascript - 使用 Javascript 在 HTML 表中搜索

Question

我正在尝试在 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 代码，但无法使其工作。希望这里有人可以提供帮助!

Answer 1

您需要在输入中使用.value而不是.innerHTML来获取其值。

通过编写returnalert("")，您不会返回任何内容，您需要点击此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>