主要實現功能為:將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); });