jQuery之表格应用

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>