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

我需要从html表中提取数据以创建JSON数组。

这是HTML表格的结构，

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

在我的JavaScript函数中，我正在这样做

  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;

 }

当我打印数组时，我只得到“ row2_column1，row2_column2，row2_column3”。

无法锻炼我在做错/错过的事情。如果您能帮我解决这个问题，那就太好了。

最佳答案

您使用了错误的选择器，$('tableClass')将尝试选择一个名称为tableClass的元素，即：<tableClass></tableClass>
您可以改用以下方法：

$('.tableClass tbody tr')

另外，由于您使用的是对象，因此数组中的每个元素都将引用同一对象

//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);

有关对象克隆，请参见this question。