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 相关文章推荐
js null undefined 空区别说明
Jun 13 Javascript
jquery表格内容筛选实现思路及代码
Apr 16 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 Javascript
js实现简单计算器
Nov 22 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
setTimeout学习小结
Feb 08 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
Vuejs实现购物车功能
Nov 05 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
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 分页原理详解
2009/08/21 PHP
PHP编码转换
2012/11/05 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
Python实现针对中文排序的方法
2017/05/09 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
Python 多进程、多线程效率对比
2020/11/19 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
北大青鸟学生求职信
2013/09/24 职场文书
优秀学生自我鉴定范例
2013/12/18 职场文书
爱国演讲稿500字
2014/05/04 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
MySQL COUNT函数的使用与优化
2021/05/10 MySQL
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python