jQuery获取Table某列的值(推荐)


Posted in Javascript onMarch 03, 2017

在写此篇博文时,发现在以前曾写过《获取DataTable选择第一行某一列值》http://www.cnblogs.com/insus/p/5434062.html 。

但是与此篇所说的完全不一样。这篇Insus.NET需要的是jQuery去获取html table的某一行某一列的数据。

如下表:

jQuery获取Table某列的值(推荐)

Html code:

<table>
    <tr>
      <th style="width:10px;"><input id="SelectAll" type="checkbox" /></th>
      <th>ID</th>
      <th>费用名目</th>
      <th>费用解释</th>
      <th>收费明细</th>
      <th>币种</th>
      <th style="width:50px;">操作</th>
    </tr>
    @foreach (var m in new HighwayAdditionalChargeEntity().HighwayAdditionalCharges())
      {
      <tr class="trData">
        <td><input id="" class="SelectSingle" type="checkbox" value="@m.HighwayAdditionalCharge_nbr" /></td>
        <td>@m.HighwayAdditionalCharge_nbr</td>
        <td>@m.Item</td>
        <td>@m.Description</td>
        <td>@m.Itemizations</td>
        <td>@m.Currency</td>
        <td>
          <input class="Select" id="ButtonSelect" type="button" value="选择" />
        </td>
      </tr>
    }
  </table>

 当用户点击某一行最后一列的“选择”铵钮时,想获取此铵钮本行中某一列的数据。

Insus.NET有在图中示出,列与索引。索引是从0开始。如想获取“费用名目”列值,此列的列索引是2。

jQuery获取Table某列的值(推荐)

 演示:

jQuery获取Table某列的值(推荐)

上面我们获取值,是使用了.text()方法。但某一时候,你想获取列的值,它是html代码,那我们可以使用.html()方法。下面Insus.NET稍修改一下:

jQuery获取Table某列的值(推荐)

演示:

jQuery获取Table某列的值(推荐)

其实,使用索引来获取值,只是一种方法,但它不是Insus.NET最理想的方法首选。由于数据行是动态呈现,列也有可能会变更。因此Insus.NET还是习惯使用样式class来实现:

举个列子,想获取“费用解释”列的值,在此列添加一个class:

jQuery获取Table某列的值(推荐)

jQuery代码:

jQuery获取Table某列的值(推荐)

演示:

jQuery获取Table某列的值(推荐)

以上所述是小编给大家介绍的jQuery获取Table某列的值,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
js判断价格,必须为数字且不能为负数的实现方法
Oct 07 Javascript
AngularJS封装指令方法详解
Dec 12 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
jquery实现轮播图特效
Apr 12 jQuery
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 #Javascript
js正则表达式验证密码强度【推荐】
Mar 03 #Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 #Javascript
jQuery简单实现MD5加密的方法
Mar 03 #Javascript
详解angular2封装material2对话框组件
Mar 03 #Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 #Javascript
AngularJS表格样式简单设置方法示例
Mar 03 #Javascript
You might like
PHP实现的迷你漂流瓶
2015/07/29 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
jQuery中after的两种用法实例
2013/07/03 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
vue.js中父组件调用子组件的内部方法示例
2017/10/22 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
JavaScript如何操作css
2020/10/24 Javascript
python中精确输出JSON浮点数的方法
2014/04/18 Python
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
公司员工检讨书
2014/02/08 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
教师先进工作者事迹材料
2014/05/01 职场文书
党员剖析材料范文
2014/12/18 职场文书
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL