How to extract text inside nested HTML using JQuery?

Question

I have here HTML Code:

<div class="actResult" style="border: solid">
    <table>
        <tbody>
            <tr>
                <td>Order Number</td>
                <td>1</td>
            </tr>
            <tr>
                <td>Customer Number</td>
                <td>3</td>
            </tr>
            <tr>
                <td>Complaint Code</td>
                <td>b</td>
            </tr>
            <tr>
                <td>Receivable Receipt Number</td>
                <td>5</td>
            </tr>
            <tr>
                <td>Date Called</td>
                <td>2014-03-19</td>
            </tr>
            <tr>
                <td>Scheduled Day Of Checkup</td>
                <td>2014-03-19</td>
            </tr>
            <tr>
                <td>Scheduled Day Of Service</td>
                <td>2014-03-21</td>
            </tr>
            <tr>
                <td>Checkup Status</td>
                <td>Y</td>
            </tr>
            <tr>
                <td>Service Status</td>
                <td>N</td>
            </tr>
            <tr>
                <td>Technician Number Checkup</td>
                <td>3</td>
            </tr>
            <tr>
                <td>Technician Number Service</td>
                <td>1</td>
            </tr>
        </tbody>
    </table>
</div>

I want to get the values of the tags and put them into an array with the a structure like array("first td" => "second td"), so for this case the array would be array("Order Number" => "1", "Customer Number" => "3", "Complaint Code" => "b", ...) and so on.

After that, the final array would be sent into a PHP code.

I've been trying to extract some of the values from the HTML using var html = $(this).filter(function( index ){ return $("td", this) }).filter(":odd").text(); and various other combinations of filter(), but it doesn't seem to work for me.

How do I go about doing what I want to do?

Travis J · Accepted Answer · 2014-03-25 19:02:03Z

4

jsFiddle Demo

You are going to want to use .each for that and iterate through the rows in the table. For each row, take the first cell (.eq(0)) as the key, and the second cell (.eq(1)) as the value. Place these in a result object.

//object to hold resulting data
var result = {};

//iterate through rows
$('.actResult tr').each(function(){

 //get collection of cells
 var $tds = $(this).find('td');

 //set the key in result to the first cell, and the value to the second cell
 result[$tds.eq(0).html()] = $tds.eq(1).text();
});

answered Mar 25, 2014 at 19:02

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

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

3 Comments

markovchain Over a year ago

Thank you. I'm accepting this one because I find it more intuitive, but both answers gives what I want.

markovchain Over a year ago

Could you help me take it one step further? I'm trying to pass the array now into the PHP code. I'll edit my post to show what code I'm using to pass and read it (I know the array exists and it seems to be passing correctly, but the $_GET or $_POST is showing nothing).

Travis J Over a year ago

@markovchain - You should make that into a separate question. It will allow you to get help faster and maintain the original context of this question.

Ram · Accepted Answer · 2014-03-25 19:12:12Z

1

You can get the rows property of the table element and create an object based on the cells' value:

var rows = document.querySelector('.actResult table').rows, 
    data = {}, c, l = rows.length, i = 0;

for (; i < l; i++) {
    c = rows[i].cells;
    data[c[0].innerHTML] = c[1].innerHTML;
}

http://jsfiddle.net/tG8F6/

edited Mar 25, 2014 at 19:12

answered Mar 25, 2014 at 19:06

Ram

145k16 gold badges174 silver badges201 bronze badges

Collectives™ on Stack Overflow

How to extract text inside nested HTML using JQuery?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related