How To Get Table Column Value with jQuery

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 HTML inline editing, we were learn how to work with inline editing in HTML5.

Also checkout other related tutorials,

Below are simple steps to get table column value :

Step 1: We will define table with inline editing in HTML5.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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">&nbsp;</td>
    <td contenteditable="true">&nbsp;</td>
    <td contenteditable="true">&nbsp;</td>
  </tr>
  </tbody>
</table>

Step 2: We will define table with inline editing in HTML5.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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();