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 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
jQuery实现长文字部分显示代码
May 13 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
Jul 08 Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 Javascript
js+html实现点名系统功能
Nov 05 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 Javascript
微信小程序订阅消息(java后端实现)开发
Jun 01 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
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
PHP编译安装中遇到的两个错误和解决方法
2014/08/20 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
浅谈python中的数字类型与处理工具
2017/08/02 Python
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
python实现抖音点赞功能
2019/04/07 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
简历自我评价模版
2014/01/31 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技
Elasticsearch 聚合查询和排序
2022/04/19 Python