Jquery中使用某个关键字进行查询时,table里面相关文字颜色变化 博客分类: javascriptJqueryhtml jqueryjavascriptxhtmlhtml
程序员文章站
2024-03-15 16:53:36
...
<!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>