主要实现功能为:将table中每一个tr中的数据存为一个对象,再将对象分别存到数组中,这是在做项目时候遇到的问题,每一个tr就代表一个表的一条数据,多个tr就是多条数据,需要传到后端,逐条添加,在网上看其他博客都是直接遍历所有td,所以自己又搞了一下,总结一下
HTML代码:
<div align="center"> <table id="tab1" border="1" align="center"> <tbody> <tr> <td><input type="text" value="001" id="001" /></td> <td><input type="text" value="002" id="002" /></td> </tr> <tr> <td><input type="text" value="003" id="003" /></td> <td><input type="text" value="004" id="004" /> <td class="a"><input type="submit" value="提交" /> </td> </tr> </tbody> </table> <br> <button id="btntb">table1</button> <button id="btntb2">table2</button> </div>
Js实现:
/*Js实现*/ $('#btntb').click(function() { let arr = new Array(); let lists = $('#tab1 tr'); for (let i = 0; i < lists.length; i++) { let obj = { } let newlist = lists.eq(i).find('td').not('.a'); for (let j = 0; j < newlist.length; j++) { let va = newlist.eq(j).find('input').val(); let id = newlist.eq(j).find('input').attr('id') obj[id] = va; } arr.push(obj); } console.log(arr); });
JQuery实现:
$('#btntb2').click(function() { let arr = new Array(); $("#tab1").find("tr").each(function() { let obj = { } var tdArr = $(this).children().not('.a') $.each(tdArr, function() { let va = $(this).find('input').val() let id = $(this).find('input').attr("id") obj[id] = va; }) arr.push(obj); }); console.log(arr); });