- 在一个表格上可能会存在多个数据类,但是如果只依靠元素进行选择,那么很难定位摸一个列上,岁在jQuery中一共有列选择器.
| | | |
---|
1 | :nth-child(eq|even|oddd|index) | 选择指定的列中所有的元素,可以使用列的索引,偶数,奇数来完成,列的索引是从1开始的. | 元素集合 |
2 | :first-child | 取得表格的第一列 | 元素集合 |
3 | :last-child | 取得表格的最后一列 | 元素集合 |
4 | :only-child | 取得只有一个字元素的父元素 | 元素集合 |
选择指定的列
<html>
<head>
<meta charset="UTF-8">
<title>jquery项目</title>
<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
$(function(){
$("table td:nth-child(1)").attr("class","init");
})
</script>
</head>
<body>
<table border=1>
<tr id="dept-title">
<td>编号</td>
<td>部门名称</td>
<td>部门位置</td>
<td>部门人数</td>
</tr >
<tr id="dept-123">
<td>123</td>
<td>人事部</td>
<td>北京</td>
<td>12</td>
</tr>
<tr id="dept-222">
<td>222</td>
<td>财务部</td>
<td>上海</td>
<td>33</td>
</tr>
<tr id="dept-333">
<td>333</td>
<td>编辑部</td>
<td>广州</td>
<td>44</td>
</tr>
</table>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f96abca73f44817648c90185ec686506.png)
$(function(){
$("table td:nth-child(odd)").attr("class","init");
})
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/73dfe5fffa9adc51563e2c17ed424583.png)
$(function(){
$("table td:nth-child(even)").attr("class","init");
})
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0e9a65c49ab22a24b702c8d7efb5cc97.png)
选择第一列与最后一列
- 可以使用:first-child和:last-child
- 选择第一列
$(function(){
$("table td:first-child").attr("class","init");
})
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/43e72d4b137d73fcec635b89eba7749a.png)
$(function(){
$("table td:last-child").attr("class","init");
})
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6e61b7c1f062460c5972f1d76010ba61.png)
- :first-child和:last-child选择器于:first和:last是两种操作
空元素选择
- 如果表格中有一列元素为空的时候,就可以使用:only-child
<html>
<head>
<meta charset="UTF-8">
<title>jquery项目</title>
<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
$(function(){
$("table td:only-child").attr("class","init");
})
</script>
</head>
<body>
<table border=1>
<tr>
<td colspan="4"></td>
</tr >
<tr id="dept-title">
<td>编号</td>
<td>部门名称</td>
<td>部门位置</td>
<td>部门人数</td>
</tr >
<tr id="dept-123">
<td>123</td>
<td>人事部</td>
<td>北京</td>
<td>12</td>
</tr>
<tr id="dept-222">
<td>222</td>
<td>财务部</td>
<td>上海</td>
<td>33</td>
</tr>
<tr id="dept-333">
<td>333</td>
<td>编辑部</td>
<td>广州</td>
<td>44</td>
</tr>
</table>
</body>
</html>