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 相关文章推荐
jQuery对表单的操作代码集合
Apr 06 Javascript
jQuery操作元素css样式的三种方法
Jun 04 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
Vue通过provide inject实现组件通信
Sep 03 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 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导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
PHP发送邮件确认验证注册功能示例【修改别人邮件类】
2019/11/09 PHP
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
使用python装饰器验证配置文件示例
2014/02/24 Python
Python下Fabric的简单部署方法
2015/07/14 Python
Python中pygame安装方法图文详解
2015/11/11 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
Python高斯消除矩阵
2019/01/02 Python
Python3爬楼梯算法示例
2019/03/04 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
教师评优的个人自我评价分享
2013/09/19 职场文书
学前教育毕业生自荐信
2013/10/29 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
2015年班级工作总结范文
2015/04/03 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
话题作文之诚信
2019/11/28 职场文书