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 相关文章推荐
JavaScript 判断判断某个对象是Object还是一个Array
Jan 28 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
javascript的BOM汇总
Jul 16 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
js实现下一页页码效果
Mar 07 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
json字符串传到前台input的方法
Aug 06 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
24个ES6方法解决JS实际开发问题(小结)
May 31 Javascript
vue-element-admin项目导入和导出的实现
May 21 Vue.js
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
一个多文件上传的例子(原创)
2006/10/09 PHP
php简单封装了一些常用JS操作
2007/02/25 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
详解jquery和vue对比
2019/04/16 jQuery
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
Python实现KNN邻近算法
2021/01/28 Python
python操作redis方法总结
2018/06/06 Python
python reverse反转部分数组的实例
2018/12/13 Python
详解用python写一个抽奖程序
2019/05/10 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
python实现飞船大战
2020/04/24 Python
哪些是python中web开发框架
2020/06/17 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
学校招生宣传广告词
2014/03/19 职场文书
学雷锋演讲稿汇总
2014/05/10 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
《正比例》教学反思
2016/02/23 职场文书
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python
详解SQL的窗口函数
2022/04/21 Oracle