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 拖拉缩放效果
Dec 10 Javascript
仿谷歌主页js动画效果实现代码
Jul 14 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
判断滚动条到底部的JS代码
Nov 04 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
JS利用cookies设置每隔24小时弹出框
Apr 20 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
vue父子组件通信的高级用法示例
Aug 29 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 Javascript
Vue axios获取token临时令牌封装案例
Sep 11 Javascript
详解Vue router路由
Nov 20 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 SEO优化之URL优化方法
2011/04/21 PHP
一个简单且很好用的php分页类
2013/10/26 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
php处理复杂xml数据示例
2016/07/11 PHP
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
Bootstrap入门教程一Hello Bootstrap初识
2017/03/02 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
Python通过future处理并发问题
2017/10/17 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
安德玛菲律宾官网:Under Armour菲律宾
2020/07/28 全球购物
医学生求职自荐书
2014/06/12 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
企业团队精神心得体会
2016/01/19 职场文书
Golang并发操作中常见的读写锁详析
2021/08/30 Golang