Hi, today I got a work to get all editable column value into array and send to server side with help of Ajax. In this tutorial I am sharing simple code to parse column value and send to server side. In previous tutorial we were learn how to work with inline editing in HTML5.
Below are simple steps to get table column value :
Step 1: We will define table with inline editing in HTML5.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
<table width="100%" class="table table-bordered table-hover" id="_addFiveTable">
<thead>
<tr>
<th>Item</th>
<th>Item details</th>
<th>phase</th>
</tr>
</thead>
<tbody>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
</tbody>
</table>
Step 2: We will define table with inline editing in HTML5.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
var data = jQuery('table#item-team-details-table tbody tr').map(function (index) {
var cols = jQuery(this).find('td');
if (cols[0].innerHTML == '' || cols[1].innerHTML == '') {
return '';
}
return {
item: cols[0].innerHTML, // use innerHTML
itemDetails: cols[1].innerHTML, // parse
phase: cols[2].childNodes[0].value // parse
};
}).get();
