- 在一个表格上可能会存在多个数据类,但是如果只依靠元素进行选择,那么很难定位摸一个列上,岁在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>
$(function(){
$("table td:nth-child(odd)").attr("class","init");
})
$(function(){
$("table td:nth-child(even)").attr("class","init");
})
选择第一列与最后一列
- 可以使用:first-child和:last-child
- 选择第一列
$(function(){
$("table td:first-child").attr("class","init");
})
$(function(){
$("table td:last-child").attr("class","init");
})
- :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>