【发布时间】：2020-05-06 19:16:40
【问题描述】：
我正在使用 HTML 来读取 XML 文件并构建表格。我正在使用在 w3schools.com 教程中找到的代码，该部分运行良好。
我正在尝试使用搜索功能来查找（并在可能的情况下突出显示）表格中的文本。我在https://www.thriveuk.com/quick-tips-how-to-search-on-a-page-for-text-and-highlight-it/ 找到了 JQuery 代码，该代码在他的页面上运行良好，并且完全符合我的意愿。他提到可以轻松修改代码以搜索整个页面，但我无法弄清楚。我已经联系了开发者，但他没有回复。
我真的只需要在表格中搜索文本。我确定搜索失败是在引用搜索区域的语法中，并且可能与表格在代码中的构建方式有关。如果有人能告诉我我在将表格作为搜索区域时做错了什么，我将不胜感激。
<!DOCTYPE html>
<html>
<style>
table,th,td {
border : 1px solid black;
border-collapse: collapse;
}
th,td {
padding: 5px;
}
/* Style the input */
.on-page-search {
width: 65%;
font-size: 14px;
line-height: 26px;
color: #787d85;
background-color: #fcfcfc;
border: 1px solid #e0e1e1;
padding: 5px 15px;
}
/* Style the list */
.demo-links {
border-bottom: none;
padding: 5px 5px;
line-height: 36px;
}
/* Style the results */
.results {
background: #de1919;
color: white;
}
.results:hover {
background: #333;
color: white;
}
</style>
<!-- https://www.thriveuk.com/quick-tips-how-to-search-on-a-page-for-text-and-highlight-it/ -->
<body>
<p></p>
<p></p>
<p>Enter text to search this page.</p>
<p></p>
<input class="on-page-search"></input>
<p></p>
<p></p>
<script type='text/javascript'>
jQuery(document).ready(function($) {
$(".on-page-search").on("keyup", function () {
var v = $(this).val();
$(".results").removeClass("results");
//I'm pretty sure the problem is here:
$("table td").each(function(){
if (v != "" && $(this).text().search(new RegExp(v,'gi')) != -1) {
$(this).addClass("results");
}
});
});
});
</script>
<p>Click on a name to display information.</p>
<p id='showCD'></p>
<div id="data">
<table id="demo"></table>
</div>
<script>
var x,xmlhttp,xmlDoc
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "Incidents.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
x = xmlDoc.getElementsByTagName("INC");
table="<tr><th>Last Name</th><th>First Name</th><th>Date</th><th>Type</th></tr>";
for (i = 0; i <x.length; i++) {
table += "<tr onclick='displayCD(" + i + ")'><td>";
table += x[i].getElementsByTagName("LNAME")[0].childNodes[0].nodeValue;
table += "</td><td>";
table += x[i].getElementsByTagName("FNAME")[0].childNodes[0].nodeValue;
table += "</td><td>";
table += x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue;
table += "</td><td>";
table += x[i].getElementsByTagName("TYPE")[0].childNodes[0].nodeValue;
table += "</td><tr>";
}
document.getElementById("demo").innerHTML = table;
function displayCD(i) {
document.getElementById("showCD").innerHTML =
"Last: " +
x[i].getElementsByTagName("LNAME")[0].childNodes[0].nodeValue +
"<br>First: " +
x[i].getElementsByTagName("FNAME")[0].childNodes[0].nodeValue +
"<br>Date: " +
x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue +
"<br>Offense: " +
x[i].getElementsByTagName("TYPE")[0].childNodes[0].nodeValue;
}
</script>
</body>
</html>
【问题讨论】：
-
我在 "$("table td").each(function(){" 中尝试了不同的术语。我尝试了表 id 名称；为表创建一个单独的 div 并引用它；我找到了一种引用表格中所有行的方法；以及引用文档内容和正文的各种术语。该解决方案感觉就在那里，对其他人来说可能很明显。
标签： jquery search html-table