Php Flow » Php

How To Get Table Column Value with jQuery

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
<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.

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();
Did you enjoy this article? Share it!

About the Author:

Hi, This is Parvez Alam from India. I am software developer with 4 years’ experience in web development. I have submitted articles on PHP, Mysql, Magento,CSS, HTML, jQuery, web designing and social API. You can subscribe to my blog via RSS/Twitter/Google plus and Facebook. parvez1487(at)gmail(dot)com

Random Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>