<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="\js\jquery-1.4.2.min.js"></script>
</head>
<style>
.odd{background:#3CF}
.even{background:#FFC}
.td{border:solid;border-spacing:20px;200px;}
</style>
<tbody>
<table class="td">
<tr>
<th>姓名</th>
<th>性别</th>
<th>家庭地址</th>
</tr>
<tr id="row1" class="parent" colspan="3"><th bgcolor=red>数学组<th></tr>
<tr class="child_row1" ><td>雷军</td><td>女</td><td>上海人</td></tr>
<tr class="child_row1"><td>李开复</td><td>男</td><td>杭州人</td></tr>
<tr class="child_row1"><td>姚明</td><td>男</td><td>绍兴人</td></tr>
<tr id="row2" class="parent" colspan="3"><th bgcolor=red>语文组<th></tr>
<tr class="child_row2"><td>周鸿祎</td><td>男</td><td>宁波人</td></tr>
<tr class="child_row2"><td>李彦宏</td><td>男</td><td>绍兴人</td></tr>
<tr class="child_row2"><td>马云</td><td>男</td><td>绍兴人</td></tr>
</table>
<p>
<label>请输入姓名:</label>
<input type="text" value="" id="filterName" style="background:yellow"/>
</tbody>
</html>
<script>
$(function(){
$("tr.parent").click(function(){
//siblings取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
$(this).toggleClass("even").siblings('.child_'+this.id).toggle();
});
$("tr").hover(function(){
$(this).addClass("odd").siblings().removeClass("odd").end();
});
$("tr:contains('马云')").addClass("odd");//特定选中某一行 //$("tr").hide().filter(":contains(马)").show();//过滤刷选出含有"马"的一行 $("#filterName").keyup(function(){
$("tr").hide().filter(":contains('"+this.value+"')").show();
});
});</script>
为什么选中表格的时候不是整行都变色,而是几个字段背景色变了,还有如何把鼠标样式改成箭头
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="\js\jquery-1.4.2.min.js"></script>
</head>
<style>
.odd{background:#3CF}
.even{background:#FFC}
.td{border:solid;border-spacing:20px;200px;}
</style>
<tbody>
<table class="td">
<tr>
<th>姓名</th>
<th>性别</th>
<th>家庭地址</th>
</tr>
<tr id="row1" class="parent" colspan="3"><th bgcolor=red>数学组<th></tr>
<tr class="child_row1" ><td>雷军</td><td>女</td><td>上海人</td></tr>
<tr class="child_row1"><td>李开复</td><td>男</td><td>杭州人</td></tr>
<tr class="child_row1"><td>姚明</td><td>男</td><td>绍兴人</td></tr>
<tr id="row2" class="parent" colspan="3"><th bgcolor=red>语文组<th></tr>
<tr class="child_row2"><td>周鸿祎</td><td>男</td><td>宁波人</td></tr>
<tr class="child_row2"><td>李彦宏</td><td>男</td><td>绍兴人</td></tr>
<tr class="child_row2"><td>马云</td><td>男</td><td>绍兴人</td></tr>
</table>
<p>
<label>请输入姓名:</label>
<input type="text" value="" id="filterName" style="background:yellow"/>
</tbody>
</html>
<script>
$(function(){
$("tr.parent").click(function(){
//siblings取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
$(this).toggleClass("even").siblings('.child_'+this.id).toggle();
});
$("tr").hover(function(){
$(this).addClass("odd").siblings().removeClass("odd").end();
});
$("tr:contains('马云')").addClass("odd");//特定选中某一行 //$("tr").hide().filter(":contains(马)").show();//过滤刷选出含有"马"的一行 $("#filterName").keyup(function(){
$("tr").hide().filter(":contains('"+this.value+"')").show();
});
});</script>
为什么选中表格的时候不是整行都变色,而是几个字段背景色变了,还有如何把鼠标样式改成箭头
解决方案 »
- Microsoft JScript 运行时错误: 对象不支持此属性或方法
- 如何求时间差,不是日期差
- 弹出新窗口和给新窗口传值
- 動態添加表格問題
- 有关打印的问题
- N个FORM(所有内容都一样),N不定,从数据库中取值,怎么样才能按到提交按钮??
- 从一个页面中打开另外一个页面,如何使用第一个页面的变量值?(javascript)
- 我利用下面的代码限制上传文件大小,总出现例外,怎么排除这样的错误?
- 有誰知道如何讀取網頁中TextBox中的當前光標位置..急(100分相送)
- jQuery轮播图经典代码
- js编简易计算器,高手帮忙看看怎么回事,老是出现Uncaught ReferenceError: calcator is not defined 。如何修改?
- 求JS单步回退得实现
这个去掉就是就行,鼠标样式变箭头
cursor: default;
table {
border-collapse:collapse;
}
2. 另外,border-collapse不设置成separate的话,border-spacing是无效的。
3. 鼠标默认就是箭头。