jq获取动态添加的行 并查找点击行同胞元素中的input值 遍历table中td下元素的值

摘要:
1.非动态添加的行获取同胞中的input输入值$("op-submit").click(function(event){vartext1=$(event.currentTarget).parent().prev().find("input").val();vartext2=$(event.currentTarget).parent().prev().prev().find("input").val
1.非动态添加的行 获取同胞中的input输入值
$("op-submit").click(function(event){ var text1 = $(event.currentTarget).parent().prev().find("input").val(); var text2 = $(event.currentTarget).parent().prev().prev().find("input").val(); alert(text1); alert(text2); });
2.动态添加的行 获取同胞中的input输入值(非动态的也可以取到)
$(document).on("click",".op-submit",function(){
var addNum = $(this).parent().prev().prev().find("input").val();
var reason = $(this).parent().prev().find("input").val();
});
3.删除动态添加的行
$(document).on("click",".op-cancel",function(){
$(this).parent().parent().remove();
});
----------------------------------------jq获取table中的td内元素的值-------------------------------------------
由于一个表格里面不仅要显示数据,也可能接受用户输入+显示+选择混用,所以我们不能一概的.text()或find('input')去获得所有元素值。
原文地址:http://www.jb51.net/article/84629.htm

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="https://tool.4xseo.com/article/84526.html">删除</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="https://tool.4xseo.com/article/84526.html">删除</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="https://tool.4xseo.com/article/84526.html">删除</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);
    
    
  });

免责声明:文章转载自《jq获取动态添加的行 并查找点击行同胞元素中的input值 遍历table中td下元素的值》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇JDBC: Druid连接池分布式监控系统Zabbix--使用Grafana进行图形展示下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Vue中table表头合并的用法

<div class="panel-container"> <div> <table class="table-head"width="80%"> <thead> <tr> &l...

gdb调试中出现No symbol table is loaded. Use the "file" command.问题

在unix/linux系统下使用gdb进行调试时,如果出现: No symbol table is loaded. Use the "file" command. 原因是没有在Makefile中添加-g调试参数,或者添加位置出错,解决的办法是在Makefile文件的第一行加上: CFLAGS = -g 然后重新make即可。...

解决阿里云数据库RDS报错The table '/home/mysql/data3015/tmp/#sql_13975_23' is full

查询任何一条语句都显示 The table '/home/mysql/data3015/tmp/#sql_13975_23' is full 查看了下数据库利用磁盘空间没有满, 阿里云的处理方式: 1. 出现这个错误信息的原因 在SQL查询进行 group by、order by、distinct、union、多表更新、group_concat、count...

MySQL之对数据库库表的字符集的更改

数据字符集修改步骤: 对于已有的数据库想修改字符集不能直接通过 "alter database character set *"或 "alter table tablename character set *",这两个命令都没有更新已有记录的字符集,而只是对新创建的表或者记录生效。 已经有记录的字符集的调整,必须先将数据导出,经过修改字符集后重新导入后才可...

impdp expdp 数据导出导入

drop directory mydata; /u01/app/oracle/oradata/xe /u01/app/oracle/oradata/xe/tmpdata create directory mydata as '/u01/app/oracle/oradata/xe/tmpdata'; 从用户osbpm中,导出dmp文件 $ORA...

【HTML5版】导出Table数据并保存为Excel

首发我的博客 http://blog.meathill.com/tech/js/export-table-data-into-a-excel-file.html 最近接到这么个需求,要把<table>显示的数据导出成Excel表。类似的需求并不稀罕,过去我通常用PHP输出.csv文件,不过这次似乎不能这么做:数据源表格允许用户筛选和排序,与原...