脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery遍历table tr td

jquery遍历table的tr获取td的值实现方法

 更新时间：2016年05月19日 16:12:56   投稿：jingxian  
下面小编就为大家带来一篇jquery遍历table的tr获取td的值实现方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

html代码：

<tbody id="history_income_list">
<tr>
<td align="center"><input type="text" class="input-s input-w input-hs"></td>
<td align="center"><input type="text" class="input-s input-w input-hs"></td>
<td align="center"><input type="text" class="input-s input-w input-hs"></td>
<td align="center"><a class="" onclick="history_income_del(this);" href="###">删除</a></td>
</tr>
<tr>
<td align="center"><input type="text" class="input-s input-w input-hs"></td>
<td align="center"><input type="text" class="input-s input-w input-hs"></td>
<td align="center"><input type="text" class="input-s input-w input-hs"></td>
<td align="center"><a class="" href="###">删除</a></td>
</tr>
<tr>
<td align="center"><input type="text" class="input-s input-w input-hs"></td>
<td align="center"><input type="text" class="input-s input-w input-hs"></td>
<td align="center"><input type="text" class="input-s input-w input-hs"></td>
<td align="center"><a class="" href="###">删除</a></td>
</tr>
</tbody>

方法一：

var trList = $("#history_income_list").children("tr")
  for (var i=0;i<trList.length;i++) {
    var tdArr = trList.eq(i).find("td");
    var history_income_type = tdArr.eq(0).find("input").val();//收入类别
    var history_income_money = tdArr.eq(1).find("input").val();//收入金额
    var history_income_remark = tdArr.eq(2).find("input").val();//  备注
    
    alert(history_income_type);
    alert(history_income_money);
    alert(history_income_remark);
  }

方法二：

$("#history_income_list").find("tr").each(function(){
    var tdArr = $(this).children();
    var history_income_type = tdArr.eq(0).find("input").val();//收入类别
    var history_income_money = tdArr.eq(1).find("input").val();//收入金额
    var history_income_remark = tdArr.eq(2).find("input").val();//  备注
    
    alert(history_income_type);
    alert(history_income_money);
    alert(history_income_remark);
    
    
  });

以上这篇jquery遍历table的tr获取td的值实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • jquery实现超简洁的TAB选项卡效果代码

    jquery实现超简洁的TAB选项卡效果代码

    这篇文章主要介绍了jquery实现超简洁的TAB选项卡效果代码,涉及jquery通过鼠标click事件结合链式操作动态操作tab选项卡的功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • jQuery选择器中的特殊符号处理方法

    jQuery选择器中的特殊符号处理方法

    一般情况下，在jQuery选择器中，我们很少会用到诸如“.”、“#”、“(”、“[”等特殊字符，但是在实际应用中，偶尔也会遇到表达式中含有“#”和“.”等特殊字符,那么是如何处理这些个特殊字符的呢？下面小编给大家介绍下
    2017-09-09
  • JQuery实现倒计时按钮具体方法

    JQuery实现倒计时按钮具体方法

    页面中需要实现某个按钮点击完后，禁用它，并显示倒计时。这个默认是3秒，代码如下
    2013-11-11
  • jQuery实现HTML5 placeholder效果实例

    jQuery实现HTML5 placeholder效果实例

    这篇文章主要介绍了jQuery实现HTML5 placeholder效果实例,本文目的主要是在需要兼容一些浏览器时使用,需要的朋友可以参考下
    2014-12-12
  • jquery实现带缩略图的全屏图片画廊效果实例

    jquery实现带缩略图的全屏图片画廊效果实例

    这篇文章主要介绍了jquery实现带缩略图的全屏图片画廊效果,实例分析了jquery带缩略图的全屏效果图片实现技巧,并附有完整的源码下载,需要的朋友可以参考下
    2015-06-06
  • jQuery实现的简单拖动层示例

    jQuery实现的简单拖动层示例

    这篇文章主要介绍了jQuery实现的简单拖动层,可实现响应鼠标拖动div层及动态显示坐标值的功能,涉及jQuery鼠标响应及页面元素属性相关操作技巧,需要的朋友可以参考下
    2017-02-02
  • jQuery Easyui datagrid连续发送两次请求问题

    jQuery Easyui datagrid连续发送两次请求问题

    用上述方式动态加载datagrid的数据时，通过net监听，发现调用了两遍XX方法，目前的解决方案是，将url放到datagrid初始化的时候执行
    2016-12-12
  • jQuery中jqGrid分页实现代码

    jQuery中jqGrid分页实现代码

    今天看到javaeye上有人使用了jqGrid实现了数据的分页，参考它的代码，实现了这个功能，搬出来晒晒，作为自己以后学习的资料
    2011-11-11
  • web前端开发JQuery常用实例代码片段(50个)

    web前端开发JQuery常用实例代码片段(50个)

    本文给大家展示50个jquery代码片段，这些代码能够给你的javascript项目提供帮助，需要的朋友快来学习一下吧
    2015-08-08
  • jQuery仿360导航页图标拖动排序效果代码分享

    jQuery仿360导航页图标拖动排序效果代码分享

    这篇文章主要为大家详细介绍了360导航页图标拖动排序效果代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2015-08-08

最新评论