jQuery实现获取table表格第一列值的方法


Posted in Javascript onMarch 01, 2016

本文实例讲述了jQuery实现获取table表格第一列值的方法。分享给大家供大家参考,具体如下:

先来看看运行效果截图:

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程序设计有所帮助。

Javascript 相关文章推荐
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 Javascript
vue中appear的用法
Aug 17 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
JavaScript Date对象详解
Mar 01 #Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 #Javascript
jQuery增加与删除table列的方法
Mar 01 #Javascript
JavaScript如何实现组合列表框中元素移动效果
Mar 01 #Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 #Javascript
JavaScript Array对象详解
Mar 01 #Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 #Javascript
You might like
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
PHP 反射机制实现动态代理的代码
2008/10/22 PHP
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
php表单提交实例讲解
2015/11/12 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
asp.net+js实现金额格式化
2015/02/27 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
2020/07/27 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
2020/11/07 Javascript
浅谈Vue使用Elementui修改默认的最快方法
2020/12/05 Vue.js
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
python基于property()函数定义属性
2020/01/22 Python
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
高一英语教学反思
2014/01/22 职场文书
工作求职信
2014/07/04 职场文书
高三毕业评语
2014/12/31 职场文书
2015年女职工工作总结
2015/05/15 职场文书
政工师工作总结2015
2015/05/26 职场文书
比赛口号霸气押韵
2015/12/24 职场文书