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 相关文章推荐
ext for eclipse插件安装方法
Apr 27 Javascript
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
VsCode里的Vue模板的实现
Aug 12 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/11/16 PHP
codeigniter框架批量插入数据
2014/01/09 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
密码强度检测效果实现原理与代码
2013/01/04 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
Python部署web开发程序的几种方法
2017/05/05 Python
python实现二叉树的遍历
2017/12/11 Python
Python生成器以及应用实例解析
2018/02/08 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
Python读取YUV文件,并显示的方法
2018/12/04 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
美国钻石商店:Zales
2016/11/20 全球购物
电脑饰品店的创业计划书
2014/01/21 职场文书
销售简历自我评价
2014/01/24 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
管理人员岗位职责
2015/02/14 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
中学图书馆工作总结
2015/08/11 职场文书
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫