本文实例讲述了jQuery实现获取table表格第一列值的方法。分享给大家供大家参考，具体如下：
先来看看运行效果截图：
完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#Button1").click(function(){
var cols="";
$("#tb tr").each(function(){
var text = $(this).children("td:first").text();
cols+=text+"|";
})
cols=cols.length>0?cols.substring(0,cols.length-1):"";
alert(cols);
})
})
</script>
</head>
<body>
<input id="Button1" type="button" value="button" />
<table id="tab1" border="1" style="width:100%;">
<tr>
<th>Id</th>
<th>Name</th>
<th>Address</th>
</tr>
<tbody id="tb">
<tr>
<td>11</td>
<td>leaf</td>
<td>gz</td>
</tr>
<tr>
<td>22</td>
<td>flower</td>
<td>gz</td>
</tr>
</tbody>
</table>
</body>
</html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
- JQuery Ajax动态生成Table表格
- jQuery对table表格进行增删改查
- 基于JQuery的动态删除Table表格的行和列的代码
- JQuery 动态生成Table表格实例代码
- 使用jQuery操作HTML的table表格的实例解析
- jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
- jQuery实现table表格checkbox全选的方法分析
- jQuery+CSS实现的table表格行列转置功能示例
- jQuery实现table表格信息的展开和缩小功能示例
- jQuery动态操作表单示例【基于table表格】
- jQuery实现为table表格动态添加或删除tr功能示例
