选择表格中每一行的第一列可以使用jquery的遍历实现$("table tr")each(function() { // 遍历每一行
$(this)children('td:eq(0)'); // td:eq(0)选择器表示第一个单元格
});下面给出实例演示：点击按钮后表格的第一列将被加上背景色
创建Html代码
<div class="box"><span>点击按钮后，第一列将被加上背景色：</span><br>
<div class="content">
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
</div>
<input type="button" class="btn" value="选中第一列">
</div>
简单添加一点css样式
divbox{width:300px;height:250px;padding:10px 20px;border:4px dashed #ccc;}divbox>span{color:#999;font-style:italic;}
divcontent{width:250px;height:100px;margin:10px 0;padding:5px 20px;border:2px solid #ff6666;}
input[type='button']{width:200px;height:35px;margin:10px;border:2px solid #ebbcbe;}
selected{background:#99ccff;}
table{border-collapse:collapse;}
td{padding:5px 10px;border:1px solid green;}
编写jquery代码
$(function(){$("input:button")click(function() {
$("table tr")each(function() {
$(this)children('td:eq(0)')addClass('selected');
});
});
})
观察显示效果
初始状态
点击按钮选择第一列后
需要准备的材料分别有：电脑、html编辑器、浏览器。
1、首先，打开html编辑器，新建html文件，例如：indexhtml，并引入jquery，编写问题基础代码。
2、在indexhtml中的<script>标签，输入jquery代码：
$('body')append($('tr')find('td:eq(0)')text());
3、浏览器运行indexhtml页面，此时成功取到了表格的第一页数据并打印。
$(function(){
var tds = "";
$("table tr")each(function(){
tds = tds+$(this)find("td")eq(0)text();
});
alert(tds);
})
注：eq(0)是获取的每个tr中的第一个td，值根据需要自己修改即可。
<BODY>
<table>
<tr><td>11</td><td
>12</td><td>13</td></tr>
<tr><td>21</td><td
>22</td><td>23</td></tr>
<tr><td>31</td><td
>32</td><td>33</td></tr>
</table>
</BODY>
<script>
//
tr:eq(0)
取第一行
td:eq(2)
取第三列
//$("tr:eq(0)
td:eq(2)")text()
得到:13
//$("tr:eq(1)
td:eq(1)")text()
得到:22
alert($("tr:eq(0)
td:eq(2)")text());
</script>
行和列你可以用变量代替!
请采纳，谢谢!
<table class="table table-hover" id="test123">
<tr>
<th width="45">选择</th>
<th width="100">驾校名称</th>
<th width="100">合作驾校名称</th>
<th width="100">申请时间</th>
<th width="100">申请状态</th>
<th width="100"> *** 作</th>
</tr>
<tr>
<td><input type="checkbox" name="id" value="1" /></td>
<td>中大驾校</td>
<td>潇湘驾校</td>
<td>2016-04-15 14:40:20</td>
<td class="tablestate">未处理</td>
<td><a class="change button border-blue button-little update" href="#">修改申请状态</a></td>
</tr>
<tr>
<td><input type="checkbox" name="id" value="1" /></td>
<td>中大驾校</td>
<td>潇湘驾校</td>
<td>2016-04-15 14:40:20</td>
<td class="tablestate">未处理</td>
<td><a class="change button border-blue button-little update" href="#">修改申请状态</a></td>
</tr>
</table>
扩展资料：
遍历同胞：
siblings（）：被选中时找到自己的兄弟姐妹，写法有siblings（所有的兄弟姐妹）和siblings（“同级的兄弟姐妹”）。
next（）：被选中时找到自己的下级，写法有 nextAll（找到所有的下级）和next（“找到下一个元素”）和nextuntil（"被选中的元素的范围内的元素"）。
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。
first（）：返回被选中的第一元素 ，写法 $("div p")first()css("样式") 。
last（）：被选中的最后一个元素，写法 $("div p")last()css(”样式“) 。
eq（）：返回被选中元素中有索引的元素，索引号，是从0开始不是从1开始比如treq(0)id ==dataeq[i-1]id 或者 tr[0]id = data[i-1]id。
filter（）：删除真正意义上的过滤，写法 $("div ")filter("span")hide() 。
not（）：就是跟filter（）相反的用法。
提供你2中思路，具体代码就不写了
生成表的时候给修改链接一个id，id保存当前行的主键比如id="tid"+主键，为它添加onclick方法，
var id=thisidreplace("tid",""); 获取到主键
把主键拿到数据库中查到相应的数据行，赋值给表单，完成！
var parents=$(this)parent()parent(); 获得tabel行
$(parents)find("td")each(function(){
根据列的顺序赋值给相应的表单元素
})
这个方法有局限性，数据是从当前页面中取得并不是实时读取数据库，如果数据在他处有更改是取不到最新的数据的。
jQuery 提供了index()方法用于获取第一个匹配元素相对于其同胞元素的 index 位置（从0开始计数），基本语法为：$(selector)index()。因此当前 tr 的 index 可以得到行数，当前 td 的 index 可以得到列数。实例演示如下:
1、HTML结构
<table id = "test">
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>2</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>3</td><td>7</td><td>8</td><td>9</td></tr>
<tr><td>4</td><td>1</td><td>2</td><td>3</td></tr>
</table>
2、jquery代码
$(function(){
$("table td")click(function() {
var row = $(this)parent()index() + 1; // 行位置
var col = $(this)index() + 1; // 列位置
alert("当前位置：第"+row+"行，第"+col+"列")
});
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）