如何使用jQuery每个函数从html表中提取数据

Question

I'm need to extract data from a html table to create a JSON array.

Here is the structure of HTML table,

    <table class="tableClass">
        <thead class="tableHeaderClass" >
           <tr>
              <th>header_column1</th>
              <th>header_column2</th>
              <th>header_column3</th>
           </tr>
        </thead>
        <tbody class="tableBodyClass">
           <tr>
              <td>row1_column1</td>
              <td>row1_column2</td>
              <td>row1_column3</td>
           </tr>
           <tr>
             <td>row2_column1</td>
             <td>row2_column2</td>
             <td>row2_column3</td>
           </tr>
         </tbody>
    </table>

In my JavaScript function, I'm doing this

  function() {

    var json = {
        header_column1 : '',
        header_column2 : '',
        header_column3 : ''
    };

    var data = [];
    $('tableClass').find('tbody').children('tr').each(function() {
         var $tds = $(this).find('td');
         json.header_column1 = $tds.eq(0).text();
         json.header_column2 = $tds.eq(1).text();
         json.header_column3 = $tds.eq(2).text();

         data.push(json);
    });

    return data;

 }

when I print my array, but I'm getting only 'row2_column1, row2_column2, row2_column3'.

Couldn't workout what I'm doing wrong/missing. Would be great if you could help me out with this.

Answer 1

$('tableClass')

Should be

$('.tableClass')

When debugging jQuery, always make your selectors the initial suspects. Check they're finding elements before continuing the chain. Thus:

alert($('tableClass').length)

...would give you 0 .

(Sidenote:

$('tableClass').find('tbody').children('tr')

can be shortened to

$('tableClass').find('> tbody > tr')

Answer 2

You are using the wrong selector, $('tableClass') will try to select an element with a name of tableClass, ie: <tableClass></tableClass> You can use this instead:

$('.tableClass tbody tr')

Also since you are using an object each element in the array is going to reference the same object

//Clones the json object, might not be the most efficient method 
var newHeader = JSON.stringify(JSON.parse(json));
//Or just create a new object each iteration
var newHeader = {};
newHeader.header_column1 = $tds.eq(0).text();
newHeader.header_column2 = $tds.eq(1).text();
newHeader.header_column3 = $tds.eq(2).text();

data.push(newHeader);

See this question about object cloning.

Answer 3

Beyond the selectors, the object syntax is invalid, it should be:

var json = {
    header_column1: '',
    header_column2: '',
    header_column3:''
}

Also, you are updating and pushing the same object twice, so you will end up with two references to the last update on your array. In essence just getting 'row2_column1, row2_column2, row2_column3' twice on the array, instead of 'row1_column1, row1_column2, row1_column3' and 'row2_column1, row2_column2, row2_column3'

Ditch the var json declaration on top and just do this within the 'each':

var json = {}
json.header_column1 = $tds.eq(0).text();
json.header_column2 = $tds.eq(1).text();
json.header_column3 = $tds.eq(2).text();