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

由于您使用的是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> 

Answer 2

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

通过写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>