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 removeChild 使用注意事项
Apr 11 Javascript
Jquery选中或取消radio示例
Sep 29 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 Javascript
浅谈node的事件机制
Oct 09 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
vue实现移动端div拖动效果
Mar 03 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
php 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
php将html转为图片的实现方法
2017/05/19 PHP
PHP5中使用mysqli的prepare操作数据库的介绍
2019/03/18 PHP
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
2017/12/26 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
[19:26]TNC vs EG (BO3)
2018/06/07 DOTA
Python实现把数字转换成中文
2015/06/29 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
python实现汽车管理系统
2018/11/30 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
python利用opencv实现颜色检测
2021/02/23 Python
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
自荐书模板
2013/12/15 职场文书
房地产融资计划书
2014/01/10 职场文书
促销活动方案模板
2014/02/24 职场文书
暑期社会实践感言
2014/02/25 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
公路施工安全责任书
2015/05/08 职场文书