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

how to extract data from html table using jQuery each function

本文关键字：html 提取 数据 函数 jQuery 何使用      更新时间：2023-09-26

我需要从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_columnn1, row2_column2, row2_column3'.

不能锻炼我做错了什么/错过了什么。如果你能帮我解决这个问题就太好了。

$('tableClass')
应该

$('.tableClass')

在调试jQuery时，总是使你的选择器成为初始怀疑对象。在继续链之前检查他们是否找到了元素。因此:

alert($('tableClass').length)

…会给你0

(旁注:

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

可以缩写为

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

您使用了错误的选择器，$('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);

请参阅有关对象克隆的问题

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

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

同样，您对同一个对象进行了两次更新和推入，因此您最终会对数组上的最后一次更新有两个引用。本质上只是获得' row2_columnn1, row2_column2, row2_column3'两次在数组上，而不是' row1_columnn1, row1_column2, row1_column3'和' row2_columnn1, row2_column2, row2_column3'

把var json声明放在最上面，只在'each'中做:

var json = {}
json.header_column1 = $tds.eq(0).text();
json.header_column2 = $tds.eq(1).text();
json.header_column3 = $tds.eq(2).text();
相关文章：