Question

我需要从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＆＃39;。

无法锻炼我做错/缺失的事情。如果你能帮我解决这个问题会很棒。

Answer 1

$('tableClass')

应该是

$('.tableClass')

调试jQuery时，始终会使您的选择器成为最初的嫌疑人。在继续链之前检查他们是否找到元素。因此：

alert($('tableClass').length)

...会给你0。

（旁注：

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

可以缩短为

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

Answer 2

您使用了错误的选择器，$('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有关对象克隆的信息。

Answer 3

除了选择器之外，对象语法无效，它应该是：

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

此外，您正在更新并推送同一个对象两次，因此最终将对阵列上的最后一次更新进行两次引用。本质上只是获取＆＃39; row2_column1，row2_column2，row2_column3＆＃39;在数组上两次，而不是＆＃39; row1_column1，row1_column2，row1_column3＆＃39;和＆＃39; row2_column1，row2_column2，row2_column3＆＃39;

将var json声明抛弃在顶部，然后在＆＃39;每个＆＃39;中执行此操作：

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

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

3 个答案: