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 相关文章推荐
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 Javascript
jquery获取input输入框中的值
Nov 13 jQuery
原生js 实现表单验证功能
Feb 08 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
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
php cli 小技巧
2013/06/03 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
javascript的parseFloat()方法精度问题探讨
2013/11/26 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
[02:26]DOTA2英雄米拉娜基础教程
2013/11/25 DOTA
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
python变量的存储原理详解
2019/07/10 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
keras.layer.input()用法说明
2020/06/16 Python
如何解决安装python3.6.1失败
2020/07/01 Python
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
2014年教师培训的自我评价
2014/01/03 职场文书
新学期教师寄语
2014/04/02 职场文书
儿童生日会策划方案
2014/05/15 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
Spring Boot实现文件上传下载
2022/08/14 Java/Android