jqueryを使用してチェックボックス付きのテーブルを実装する手順の詳細な説明

.selected{ background :#FF6500; color:#fff; }

/** * 设置含有复选框的表格中的背景色 */ $( document ).ready(function() { /** * 表格行被单击的时候改变背景色 */ $("#tablight tr:gt(0)").click(function() //获取第2行后 { if ($(this).hasClass("selected"))//判断是否选中 { $(this).removeClass("selected").find(":checkbox").attr("checked",false);//选中移除样式 } else//设置选中 { $(this).addClass("selected").find(":checkbox").attr("checked",true);//未选中添加样式 } }); });

/** * 单击全选和反选之后改变背景色 */ function setColor()//设置tr的背景颜色 { var checkboxs = $("#tablight tr:gt(0) input[type=checkbox]");//得到所有的复选框 var boxeds = $("#tablight tr:gt(0) input[type=checkbox]:checked");//得到被选择的复选框 if(boxeds.length > 0) { checkboxs.parent().parent().addClass("selected");//复选框在td里 } else { checkboxs.parent().parent().removeClass("selected"); } }