CSS设计表格（上）--样式设计及全选功能
前⾔
本章主要设计⼀个简单⼤⽅的表格，因为在写后台的时候，统计⽤户信息等需要⽤到表格，“拿来主义的”我去扒拉别⼈家的代码，相互⽐较准备采⽤如下样式的表格，⿏标移过的地⽅变⾊，⽀持全选
⽰例⼯程如下
其中table1.htnl只实现了表格的样式，table2.html在table1.html的基础上加了⼏⾏代码，利⽤JS实现CheckBox的全选功能。⽰例⼯程
样式
table1.html内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Table界⾯</title>
<style type="text/css">
body{margin: 0;}
.main{
width: 600px;
margin-top: 10px;
margin-left:auto;
margin-right:auto;
}
.table{width: 100%;background-color: transparent;border-collapse:collapse;border-spacing:0}
.table th,.table td{padding:8px;line-height:20px;text-align: center;}
.table-border{border-top:1px solid #ddd;}
.table-border th,.table-border td{border-bottom: 1px solid #ddd;}
.table-bg thead{background-color: #f5fafe;}
.table-bordered{border:1px solid #ddd;border-collapse:separate;*border-collapse:collapse;border-left:0}
.table-bordered th,.table-bordered td{border-left:1px solid #ddd}
.table-border.table-bordered{border-bottom:0}
.table-hover tbody tr:hover td{background-color:#f5f5f5}
</style>
</head>
<body>
<div class="main">
<table class="table table-border table-bordered table-bg  table-hover">
<thead>
<tr>
<th width="25"><input type="checkbox" name="" value=""></th>
<th width="75">ID</th>
<th width="120">⽤户名</th>
<th width="80">性别</th>
<th width="130">电话</th>
<th width="170">操作</th>
</tr>
</thead>
<tbody>
<tr >
<td><input type="checkbox" value="1" name=""></td>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>123456789</td>
<td ><a title="删除" href="#">删除</a></td>
</tr>
<tr >
<td><input type="checkbox" value="1" name=""></td>
<td>2</td>
<td>李四</td>
<td>男</td>
<td>123456789</td>
<td ><a title="删除" href="#">删除</a></td>
</tr>
<tr >
<td><input type="checkbox" value="1" name=""></td>
<td>3</td>
<td>王五</td>
<td>男</td>
<td>123456789</td>
<td ><a title="删除" href="#">删除</a></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
直接新建⼀个html⽂件，将上⾯的内容拷贝到⽂件去，就可以实现上述样式，⾄于其中的各个属性，上⽹扒拉去吧，要讲这些，我的进度就慢了。
JS实现全选功能
在上述table1.html的基础上加⼏⾏代码如下：
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
/*checkbox全选*/
$("table thead th input:checkbox").on("click" , function(){
$(this).closest("table").find("tr > td:first-child input:checkbox").prop("checked",$("table thead th input:checkbox").prop("checked"));
});
</script>
这⼏⾏代码在⽂件中的位置如下jquery是什么有什么作用
当初的我学习js的时候⼀愣⼀愣的，现在整理笔记所以简单说⼀下实现全选的这⼏⾏代码。
jQuery⼯⼚函数“$”
在jQuery中，⽆论使⽤哪种类型的选择符，都需要从⼀个“$”符号和⼀对“()”开始，即 $(选择符) 。在"()"中通常使⽤字符串参数，参数中可以包含任何CSS选择符表达式，下⾯是⼏种常见的⽤法：
① 在参数中使⽤标记名
$("div")：⽤于获取⽂档中全部的<div>。
$("table thead")：⽤于获取⽂档中所有table的thead。
② 在参数中使⽤ID选择符
$("#test")：⽤于获取⽂档中ID属性值为test的⼀个元素
③  在参数中使⽤类选择符
$(".btn_open")：⽤于获取⽂档中使⽤CSS类名为btn_open的所有元素
如本实例中$("table thead th input:checkbox")中就是使⽤的标记名。注意⼀点：当$()中不带参数时，默认的参数就是document，也就是当前的⽂档流。
jQuery on⽅法
⽅法格式：$(selector).on(events,[childselector],[data],func);
作⽤：在选定元素(selector)及其⼦元素(childselector)上绑定⼀个或多个事件的处理函数。
参数：
events：必需。规定要从被选元素添加的⼀个或多个事件或命名空间。如果是多个事件，必需由空格分隔，且必须是有效的事件。
如“click”。
childselector：可选。规定只能添加到指定的⼦元素上的事件处理程序。
data：可选。规定传递到函数func的额外数据，⽤event.data取值
func：必需。规定当事件发⽣运⾏时的函数。
如本实例中的$("table thead th input:checkbox").on("click",function{内容})；即为checbox的click事件执⾏function函数。jQuery查⽗元素和⼦元素⽅法
上⾯分析了jQuery的on⽅法，下⾯分析⾥边的function()函数，如下⾯⼀句：
function(){
$(this).closest("table").find("tr > td:first-child input:checkbox").prop("checked",$(this).prop("checked"));
}
先看$(this)，这个指的就是$⼯⼚函数的元素，即下图中红⾊箭头指⽰的checkbox
下⾯再看closest()函数，该函数的作⽤是从当前元素向上遍历，直⾄⽂档根元素的所有路径（<html>），来查DOM元素的第⼀个祖先元素。下⾯咱们先看⼀下该⽂档的DOM树结构，
$(this).closest("table")要实现的功能是从checkbox开始往上（红⾊路线）查元素table，即上图红⾊箭头所⽰。
接下来再看element.find()⽅法，该⽅法沿着元素element的后代向下遍历，直⾄到要查的元素为⽌。
所以$(this).closest("table").find("tr > td:first-child input:checkbox")这句话就是要查table中符合"tr > td:first-child
input:checkbox"特性的元素，即上图中2所⽰的checkbox。关于 tr > td:first的说明，我不说了，⽹上有位兄台讲的挺好的，。
到这⾥，我们知道了$(this).closest("table").find("tr > td:first-child input:checkbox")的最终结果是查到了所有的2号checkbox。jQuery prop()⽅法
prop()⽅法设置或返回被选元素的属性和值。
$(selector).prop(property) ：返回属性的值
$(selector).prop(property,value)：设置属性和值
$(selector).prop(property,function(index,currentvalue))：使⽤函数设置属性和值
$(selector).prop({property:value, property:value,...})：设置多个属性和值
这样，$(this).closest("table").find("tr > td:first-child input:checkbox").prop("checked",$(this).prop("checked"))；这句话就能看懂了，它要实现的就是获取1号checkbox的checked属性的值并设置为所有的2号checkbox的属性值。
JS实现全选取消
当全选时，如果取消选择其中某⾏，那么久要求全选checkbox⾃动取消，只需添加代码即可，在⽰例⼯程中已添加。
$("table tbody tr input:checkbox").on("click",
function(){
var ischeck = $(this).prop("checked");
if(ischeck == false)
{
$(this).closest("table").find("tr > th:first-child input:checkbox").prop("checked",$(this).prop("checked"));    }
}
);
结语
下⼀节准备继续在该表格基础上添加删除功能。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。