数据表输入与行相处

Question

I have added inputs for only 10 columns in my datatable and trying to save with button click. Below is my code

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

it's getting all the inputs in separate array values. Is it possible to get that array by row?

Update: working sample http://live.datatables.net/bucawete/1/

Answer 1

You can map each row to create a serializeArray , here's an example:

 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>