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 call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
jQuery的几个我们必须了解的特点
May 03 Javascript
详解javascript中的事件处理
Nov 06 Javascript
提升jQuery的性能需要做好七件事
Jan 11 Javascript
vue.js的提示组件
Mar 02 Javascript
JS实现图片预加载之无序预加载功能代码
May 12 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
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
PHP版自动生成文章摘要
2008/07/23 PHP
php 代码优化之经典示例
2011/03/24 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
Angular4编程之表单响应功能示例
2017/12/13 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
vue实现前端列表多条件筛选
2020/10/26 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
python使用minimax算法实现五子棋
2019/07/29 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
UNIX文件系统常用命令
2012/05/25 面试题
开学典礼决心书
2014/03/11 职场文书
卖房协议书
2014/04/11 职场文书
职务说明书范文
2014/05/07 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers
HTML基本元素标签介绍
2022/02/28 HTML / CSS
JavaScript实现两个数组的交集
2022/03/25 Javascript
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers