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

【问题标题】：how to extract data from html table using jQuery each function如何使用jQuery每个函数从html表中提取数据
【发布时间】：2015-05-07 19:20:09
【问题描述】：

我需要从 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 tbody tr'). 无需查找然后孩子调用
另外你的代码毫无意义，你有标题和非标题元素，但是你用名为“header_column1”的属性填充你的对象文字......在尝试之前你应该清楚你的代码逻辑任何事物。同样使用= 而不是: 是只需打开控制台 或使用更好的文本编辑器即可轻松捕获的错误。
感谢大家的反馈，我刚刚开始接触 JS，我猜还是相当缺乏经验..非常欢迎您的反馈，它可以帮助我提高代码质量..哦顺便说一句，还有一些错别字……忘记了。并使用 = 而不是 : 将更正我的帖子..

标签： javascript json html-table

【解决方案1】：

$('tableClass')

应该是

$('.tableClass')

在调试 jQuery 时，总是让您的选择器成为最初的嫌疑人。在继续链条之前检查他们是否正在寻找元素。因此：

alert($('tableClass').length)

...会给你0。

（旁注：

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

可以简写为

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

【讨论】：

【解决方案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 了解对象克隆。

【讨论】：

感谢帕特里克！！，每次迭代都创建一个新对象成功了！！

【解决方案3】：

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

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

此外，您将两次更新和推送同一个对象，因此您最终将获得对数组最后一次更新的两个引用。本质上只是在数组上获得两次'row2_column1，row2_column2，row2_column3'，而不是'row1_column1，row1_column2，row1_column3'和'row2_column1，row2_column2，row2_column3'

放弃顶部的 var json 声明，只需在“每个”中执行此操作：

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

【讨论】：