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 相关文章推荐
对frameset、frame、iframe的js操作示例代码
Aug 16 Javascript
查看大图功能代码jquery版
Nov 05 Javascript
JavaScript调试工具汇总
Dec 23 Javascript
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
vue2组件之select2调用的示例代码
Oct 12 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 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防CC攻击实现代码
2011/12/29 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
Javascript 读后台cookie代码
2008/09/15 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
JavaScript实现实时更新系统时间的实例代码
2017/04/04 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
React组件中的this的具体使用
2018/02/28 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
js实现指定时间倒计时效果
2019/08/26 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
Linux下Python获取IP地址的代码
2014/11/30 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
Python面向对象编程基础解析(一)
2017/10/26 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
PyTorch预训练的实现
2019/09/18 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
linux面试题参考答案(7)
2012/10/29 面试题
工程预算与管理应届生求职信
2013/10/06 职场文书
路政管理专业推荐信
2013/11/11 职场文书
会计岗位说明书
2014/07/29 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
反邪教教育心得体会
2016/01/15 职场文书