Getting HTML table data using Jquery

Question

I am a newbie in Jquery. First of all I would like to say that I have researched almost a day regarding this query. TRied numberous methods, but none that works. I am trying to code a billing module with HTML, PHP and Jquery. Until now, I have successfully created the HTML tables. I would like the data from these tables to the retrieved to a PHP page, so that I can print them with a proper formatting.

The HTML Table is as follows.

<table id="items">
    <tbody>

      <tr>
          <th>SlNo</th>
          <th>Item</th>
          <th>Unit Cost</th>
          <th>Quantity</th>
          <th>Price</th>
      </tr>

 <tr class="item-row">
         <td class="item-name">
           <div class="delete-wpr">
          <input type="text" class="slno"/>
           <a class="delete" href="javascript:;" title="Remove row">X</a>
           </div>
         </td>

           <td><input type="text" class="slno"/></td>           

           <td><input type="text" class="cost"/></td>
           <td><input type="text" class="qty"/></td>
           <td><span class="price"></span></td>
      </tr>  



    <input type="button" value="submit" onClick="storeAndShowTableValues()"/>


    <tbody>

Now, the Jquery is as follows.

     var TableData = new Array();
     $('#items tr').each(function(row, tr){

     TableData[row]={
        "ItemNum" : $(tr).find('td:eq(0)').text(), 
        "Itemname" :$(tr).find('td:eq(1)').text(),
         "unitprice" : $(tr).find('td:eq(2)').text(),
         "Qty" : $(tr).find('td:eq(3)').text(),
        "price" : $(tr).find('td:eq(4)').text()
    }
}
); 
TableData.shift();  // first row is the table header - so remove

var TableData = JSON.stringify(TableData);

But the JSON object I am getting is garbage. The table data is not retrieved. Please help.

Tewdyn · Accepted Answer · 2016-01-19 13:18:25Z

4

To get the value of an input field in jQuery you need to use the .val() function.

Also make sure that you select the input element within your td tag

http://api.jquery.com/val/

So your code should look something like this:

var TableData = new Array();

    $('#items tr').each(function(row, tr){

    TableData[row]={
        "ItemNum" : $(tr).find('td:eq(0) input').val(),
        "Itemname" :$(tr).find('td:eq(1) input').val(),
         "unitprice" : $(tr).find('td:eq(2) input').val(),
         "Qty" : $(tr).find('td:eq(3) input').val(),
        "price" : $(tr).find('td:eq(4)').text()
    }
}
);
TableData.shift();  // first row is the table header - so remove

TableData = JSON.stringify(TableData);

answered Jan 19, 2016 at 13:18

Tewdyn

7173 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tewdyn Over a year ago

@AkhilKPAULOSE what are you trying to tell me?

iCollect.it Ltd Over a year ago

Don't feel too bad. The OP and accepted answer both work for the same company. Google is not always your friend! +1:)

Tewdyn Over a year ago

@TrueBlueAussie nothing to feel bad for :-).

Anoop LL · Accepted Answer · 2016-01-19 13:24:20Z

1

var TableData = new Array();

$('#items tr').each(function(row){

TableData[row]={
     "ItemNum" : $(this).find('td:eq(0) input').val(), 
    "Itemname" :$(this).find('td:eq(1) input').val(),
     "unitprice" : $(this).find('td:eq(2) input').val(),
     "Qty" : $(this).find('td:eq(3) input').val(),
    "price" : $(this).find('td:eq(4) input').val(),
  }
  }
); 
 TableData.shift();  // first row is the table header - so remove

  var TableData = JSON.stringify(TableData);

answered Jan 19, 2016 at 13:24

Anoop LL

1,5752 gold badges23 silver badges36 bronze badges

1 Comment

Tewdyn Over a year ago

Price is an span tag so you would use .text here and not .val

Ashif Shereef · Accepted Answer · 2016-01-19 13:32:23Z

-2

Not to take much of your time, but I think you would need to get the val() instead of text() or html()

answered Jan 19, 2016 at 13:32

Ashif Shereef

4941 gold badge9 silver badges25 bronze badges

2 Comments

epascarello Over a year ago

How does a table cell have a value!?

user5810512 Over a year ago

@epascarello: It is an input field inside the table cell, and input fields can have values.

Collectives™ on Stack Overflow

Getting HTML table data using Jquery

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related