Jquery中使用某个关键字进行查询时，table里面相关文字颜色变化 博客分类： javascriptJqueryhtml jqueryjavascriptxhtmlhtml
程序员文章站
2024-03-16 08:09:16
...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Table word Color Change</title>
<script language="javascript" type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var i = 0;
//在文本框中输入文字时，按下Enter键
$("#txtc1").keydown(function(e) {
var curKey = e.which;
//如果curKey等13时，说明是Enter键
if (curKey == 13) {
var txtQuery = $("#txtc1").val();
if (i >= 1) {
var Qt = txtQuery;
txtQuery = Qt;
$("#TT").load();
}
//判断是否为空
if (txtQuery == "") {
alert("不能为空，请输入");
return;
}
else {
//全文查找出现的所有txtQuery
var reg = new RegExp(txtQuery,'g');
//循环遍历整个table中td
$("td").each(function() {
//获取整个table内容
var bb = $(this).html();
//匹配整个
var cc = bb.replace(reg, '<span style="color:#F00">' + txtQuery + '</span>');
$(this).html(cc);
});
i++;
}
}
});
});
</script>
<style type="text/css">
.style1
{
height: 23px;
}
.style2
{
height: 25px;
}
body
{
margin: 0;
padding: 40px;
background: #fff;
font: 80% Arial, Helvetica, sans-serif;
color: #555;
line-height: 180%;
}
</style>
</head>
<body>
<input type="text" id="txtc1" />
<table width="100%" class="get1" style="border-color: Blue; border-style: groove" id="TT">
<tr>
<td class="style2">
1
</td>
<td class="style2">
2
</td>
<td class="style2">
3
</td>
</tr>
<tr>
<td class="style1">
3
</td>
<td class="style1">
3
</td>
<td class="style1">
4
</td>
</tr>
</table>
</body>
</html>