版权声明：有问题可联系博主QQ：15577969，大家一起相互交流和学习。 https://blog.csdn.net/qq15577969/article/details/82712764
<html>
<head>
<meta charset="UTF-8">
<title>jQuery搜索高亮显示</title>
</head>
<body>
<input type="text" id="searchContent" placeholder=" 输入要搜索的书名" style="width:200px" class="input-text">
<table>
<tr>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th>出版日期</th>
<th>页数</th>
<th>价格</th>
<th>内容摘要</th>
<th>操作</th>
</tr>
<c:forEach items="${bookList }" var="book">
<tr>
<td class="highlightRow">${book.name }</td>
<td>${book.author }</td>
<td>${book.publish }</td>
<td>
<fmt:formatDate value="${book.publishdate}" pattern="YYYY-MM-dd" />
</td>
<td>${book.page }</td>
<td>${book.price }</td>
<td>${book.content }</td>
<td>
<a href="edit.html?id=${book.id }">修改</a>
<a href="javascript:void(0)" onclick="del(${book.id})">删除</a>
</td>
</tr>
</c:forEach>
</table>
<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
//1.获取要高亮显示的行
var rowNode = $('.highlightRow');
//2.获取搜索的内容
var searchContent = $("#searchContent").val();
//3.遍历整行内容，添加高亮颜色
rowNode.each(function() {
var word = $(this).html();
word = word.replace(searchContent, '<span style="color:red;">' + searchContent + '</span>');
$(this).html(word);
});
</script>
</body>
</html>