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 相关文章推荐
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
JavaScript CSS修改学习第二章 样式
Feb 19 Javascript
不同浏览器的怪癖小结
Jul 11 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
Jun 26 Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
JavaScript数组排序小程序实现解析
Jan 13 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 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
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
js确定对象类型方法
2012/03/30 Javascript
javascript实现日期格式转换
2014/12/16 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
Linux下为不同版本python安装第三方库
2016/08/31 Python
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
致跳远运动员广播稿
2014/02/11 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
党的作风建设心得体会
2014/10/22 职场文书
财务审计整改报告
2014/11/06 职场文书
MySQL慢查询的坑
2021/04/28 MySQL
MYSQL 运算符总结
2021/11/11 MySQL
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers