使用JQUERY 查询表格中相应内容,并改变内容所在的单元格背景色!急!!!谢谢
1个回答
展开全部
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('#query').click(function(){
//获取所有包含查询内容的文本td,并遍历
$('td:contains("'+$('#query_input').val()+'")').each(function(){
//1、查询内容和td完全相同才改变td颜色
//if($(this).text() == $('#query_input').val()){
//$(this).css({'background-color':'red'});
//}
//2、改变所有满足条件的td背景色
$(this).css({'background-color':'red'});
});
});
});
</script>
</head>
<body>
<input type="text" id="query_input"/> <a href="#" id="query">查询</a>
<table>
<tr>
<td>哈哈</td>
<td>嘎嘎</td>
<td>娃哈哈</td>
<td>zzz</td>
</tr>
<tr>
<td>dsas</td>
<td>tt</td>
<td>哈哈1</td>
<td>down </td>
</tr>
<tr>
<td>down2</td>
<td>out</td>
<td>哈哈2</td>
<td>ctor</td>
</tr>
</table>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('#query').click(function(){
//获取所有包含查询内容的文本td,并遍历
$('td:contains("'+$('#query_input').val()+'")').each(function(){
//1、查询内容和td完全相同才改变td颜色
//if($(this).text() == $('#query_input').val()){
//$(this).css({'background-color':'red'});
//}
//2、改变所有满足条件的td背景色
$(this).css({'background-color':'red'});
});
});
});
</script>
</head>
<body>
<input type="text" id="query_input"/> <a href="#" id="query">查询</a>
<table>
<tr>
<td>哈哈</td>
<td>嘎嘎</td>
<td>娃哈哈</td>
<td>zzz</td>
</tr>
<tr>
<td>dsas</td>
<td>tt</td>
<td>哈哈1</td>
<td>down </td>
</tr>
<tr>
<td>down2</td>
<td>out</td>
<td>哈哈2</td>
<td>ctor</td>
</tr>
</table>
</body>
</html>
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询