數據表輸入與行相處

Question

我在數據表中僅添加了 10 列的輸入，並嘗試通過單擊按鈕進行保存。 下面是我的代碼

 $('#tblFormBtn').click( function() {
   let datas = tblListUpload.$("input").serializeArray();
 });

它以單獨的數組值獲取所有輸入。 是否可以逐行獲取該數組？

Update:工作樣本http://live.datatables.net/bucawete/1/

Answer 1

您可以map每行創建一個serializeArray ，這是一個示例：

 const table = $('#example').DataTable(); const data = table.rows().nodes().map((e) => $(e).find('input, select').serializeArray()); console.log(data.toArray());

 <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Position</th> <th>Office</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Age</th> <th>Position</th> <th>Office</th> </tr> </tfoot> <tbody> <tr> <td>Tiger Nixon</td> <td><input type="text" id="row-1-age" name="row-1-age" value="61"></td> <td><input type="text" id="row-1-position" name="row-1-position" value="System Architect"></td> <td> <select size="1" id="row-1-office" name="row-1-office"> <option value="Edinburgh" selected="selected">Edinburgh</option> <option value="London">London</option> <option value="New York">New York</option> <option value="San Francisco">San Francisco</option> <option value="Tokyo">Tokyo</option> </select> </td> </tr> <tr> <td>Garrett Winters</td> <td><input type="text" id="row-2-age" name="row-2-age" value="63"></td> <td><input type="text" id="row-2-position" name="row-2-position" value="Accountant"></td> <td> <select size="1" id="row-2-office" name="row-2-office"> <option value="Edinburgh">Edinburgh</option> <option value="London">London</option> <option value="New York">New York</option> <option value="San Francisco">San Francisco</option> <option value="Tokyo" selected="selected">Tokyo</option> </select> </td> </tr> <tbody> </table>