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 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
总结AJAX相关JS代码片段和浏览器模型
Aug 15 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
javascript实现去除HTML标签的方法
Dec 26 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
实例讲解React 组件生命周期
Jul 08 Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 Javascript
详解javascript脚本何时会被执行
Feb 05 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写的简易聊天室代码
2011/06/04 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
基于Python log 的正确打开方式
2018/04/28 Python
django用户登录和注销的实现方法
2018/07/16 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
Python class的继承方法代码实例
2020/02/14 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
计划生育宣传标语
2014/06/21 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
出国签证在职证明范本
2014/11/24 职场文书
安全保证书
2015/01/16 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python
mysql查询结果实现多列拼接查询
2022/04/03 MySQL