1.单选框控制表格行高亮
样式:
<style type="text/css">
.even {
background:#FFF38F;
}
.odd {
background:#FFFFFF;
}
.selected {
background:#F00FFF;
}
</style>
实现:
<script type="text/javascript">
//隔行变色
$("tbody>tr:odd").addClass("odd");//给tbody奇数行添加样式
$("tbody>tr:even").addClass("even");//给tbody偶数行添加样式
//单选控制表格行高亮
$("tbody>tr").click(function(){
$(this).addClass("selected")
.siblings().removeClass("selected")//取消其它高亮
.each(function(){
$(this).find(":radio").attr("checked",false)
})
.end()
.find(":radio").attr("checked",true);
});
</script>
2.复选框控制表格行高亮:
<script type="text/javascript">
//隔行变色
$("tbody>tr:odd").addClass("odd");//给tbody奇数行添加样式
$("tbody>tr:even").addClass("even");//给tbody偶数行添加样式
//复选框控制表格行高亮
$("tbody>tr").click(function(){
if($(this).hasClass("selected")){//判断是否有selected高亮样式
$(this).removeClass("selected")
.find(":checkbox").attr("checked",false);
}else{
$(this).addClass("selected")
.find(":checkbox").attr("checked",true);
}
});
</script>
3.表格内容筛选
<script type="text/javascript">
//隔行变色
$("tbody>tr:odd").addClass("odd");//给tbody奇数行添加样式
$("tbody>tr:even").addClass("even");//给tbody偶数行添加样式
//内容筛选
$("#selector").keyup(function(){
var txt = $(this).val();
$("tbody tr").hide()
.filter(":contains('"+txt+"')").show();
});
</script>
4.添加一行
<script type="text/javascript">
//隔行变色
$("tbody>tr:odd").addClass("odd");//给tbody奇数行添加样式
$("tbody>tr:even").addClass("even");//给tbody偶数行添加样式
//添加一行
//如果把添加行的定义放在1处,只能添加一行。???
//-- 1 --
$("#addRow").click(function(){
//定义要添加的行
var $row = $("<tr><td><input type='checkbox' /></td><td><input type='text' /></td><td><input type='text' /></td><td><input type='text' /></td></tr>");
$("#testTable").append($row);
//$row.appendTo("tbody");
});
</script>