如何使用JQuery在嵌套HTML中提取文本？

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?

Answer 1

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();
});

Answer 2

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/