【问题标题】:Find table data store in within an array of arrays在数组数组中查找表数据存储
【发布时间】:2013-12-31 10:01:51
【问题描述】:

我需要从表中获取数据并将其存储在数组中。表格的每一行都应该是数组中的一个新数组。基本上html看起来是这样的:

<table id="contactlisttable">
    <tr>
        <th>Name</th>
        <th>Title</th>
        <th>Phone</th>
    </tr>
    <tr>
        <td class="contactlist contactlistlastfirst">Joey</td>
        <td class="contactlist contactlisttitle">webdesigner</td>
        <td class="contactlist contactlistphone">5555555</td>
    </tr>
    <tr>
        <td class="contactlist contactlistlastfirst">Anthony</td>
        <td class="contactlist contactlisttitle">webdesigner</td>
        <td class="contactlist contactlistphone">5555555</td>
    </tr>
</table> 

等等……

这是我的代码

jQuery(document).ready(function(){
    $(function(){
        var $table = $("#contactlisttable"),
        $headerCells = $table.find("tr th"),
        $myrows = $table.find("tr"); // Changed this to loop through rows

        var headers = [],
            rows = [];

        $headerCells.each(function() {
            headers[headers.length] = $(this).text();
        });

        $myrows.each(function() {
            $mycells = $myrows.find( "td.contactlist" ); // loop through cells of each row
            cells = []
            $mycells.each(function() {
                cells.push($(this).text());
            });
            if ( cells.length > 0 ) {
                rows.push(cells);
            }  
        });
        console.log(headers);
        console.log(rows);
    }); 
});

我当前的代码输出了

[["Waddell, Joey", "webdesigner", "", 15 more...], ["Waddell, Joey", "webdesigner", "", 15 more...],

期望的输出是:

["Name","Title","Phone"]
[["Joey","webdesigner","555555"]
["Anthony","webdesigner","555555"]]

【问题讨论】:

标签: javascript arrays


【解决方案1】:

我认为这可以更简单:

Live Demo

JS

$(function(){
    var results = []; 
    var row = -1; 
    $('#contactlisttable').find('th, td').each(function(i, val){
        if(i % 3 === 0){ //New Row? 
            results.push([]); 
            row++;//Increment the row counter
        }
        results[row].push(this.textContent || this.innerText); //Add the values (textContent is standard while innerText is not)       
    }); 
    console.log(results); 
}); 

编辑

这是一个更好的解决方案(兼容 IE9+)。与我以前的解决方案不同,它考虑了可变的行长度。

Live Demo

JS

//IE9+ compatable solution
$(function(){
    var results = [], row; 
    $('#contactlisttable').find('th, td').each(function(){
        if(!this.previousElementSibling){ //New Row?
            row = []; 
            results.push(row); 
        }
        row.push(this.textContent || this.innerText); //Add the values (textContent is standard while innerText is not)       
    }); 
    console.log(results); 
}); 

【讨论】:

  • 太棒了!我可以在里面放 .text() 而不是 .innerHTML 所以没有 html 吗?
  • 当然,只需将this.innerHTML 更改为$(this).text(),尽管使用this.innerText || this.textContent 会更高效,因为它消除了将this 不必要地转换为jQuery 对象并保持与firefox 的兼容性。跨度>
  • ok 看起来不错,我无法理解第 5 行,这是将 tr 添加到内部数组中?
  • 这一行:if(i % 3 === 0)?如果是这样,% 就是remainder operator。它返回将这两个数字相除的余数。我用它来找出每一行的开始位置,使用 3 因为每行有 3 个td。播放序列:0 % 3 = 0(新行),1 % 3 = 22 % 3 = 13 % 3 = 0(新行),4 % 3 = 15 % 3 = 26 % 3 = 0(新行),...。如您所见,该模式通过返回 0 来划分网格中的行。我们使用此标志来知道何时添加我们的子数组。
  • 如果一个或多个表格单元格为空怎么办?我在数组中得到值“未定义”。是否可以检查空单元格,以免它们被添加到数组中,或者以后应该从数组中删除未定义的值?
猜你喜欢
  • 2019-05-23
  • 2018-07-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-01-13
  • 2021-02-14
  • 1970-01-01
  • 2012-04-23
相关资源
最近更新 更多