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 相关文章推荐
修复ie8&amp;chrome下window的resize事件多次执行
Oct 20 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
Sep 25 Javascript
JavaScript数组去重实现方法小结
Jan 17 Javascript
JavaScript 事件代理需要注意的地方
Sep 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
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
Python创建xml的方法
2015/03/10 Python
基于python时间处理方法(详解)
2017/08/14 Python
Python的互斥锁与信号量详解
2019/09/12 Python
python数据爬下来保存的位置
2020/02/17 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
python 读取.nii格式图像实例
2020/07/01 Python
python和go语言的区别是什么
2020/07/20 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
语文教育专业应届生求职信
2013/11/23 职场文书
学校食堂采购员岗位职责
2013/12/05 职场文书
期中考试后的反思
2014/02/08 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
食品安全承诺书范文
2014/08/29 职场文书
保密工作承诺书
2014/08/29 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
志愿者个人总结
2015/03/03 职场文书
团拜会主持词
2015/07/04 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
早上好问候语大全
2015/11/10 职场文书