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 相关文章推荐
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
在多个页面使用同一个HTML片段《续》
Mar 04 Javascript
js改变embed标签src值的方法
Apr 10 Javascript
jQuery插件kinMaxShow扩展效果用法实例
May 04 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
AngularJS教程之MVC体系结构详解
Aug 16 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 Javascript
JS实现的雪花飘落特效示例
Dec 03 Javascript
原生javascript如何实现共享onload事件
Jul 03 Javascript
jQuery实现带进度条的轮播图
Sep 13 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
mysql建立外键
2006/11/25 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
Angularjs单选框相关的示例代码
2017/08/17 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
python实现斐波那契数列的方法示例
2017/01/12 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
Python生成短uuid的方法实例详解
2018/05/29 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
python常用数据重复项处理方法
2019/11/22 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
Python容器类型公共方法总结
2020/08/19 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
德国购买健身器材:AsVIVA
2017/08/09 全球购物
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
高中英语教学反思范文
2016/03/02 职场文书