将表转换为数组

Posted 2023-03-05

【中文标题】将表转换为数组

【英文标题】：Convert Table to an Array

【发布时间】：2012-01-04 02:28:09

【问题描述】：

我看过很多关于如何将数组转换为表格的帖子，但相反的帖子几乎没有。我想要一张这样的桌子：

<table id="dataTable">
    <tr>
        <th>Functional Category</th>
        <th>Brand Name</th>
        <th>When Obtained</th>
        <th>How Obtained</th>
        <th>How Often Worn</th>
        <th>Where Made</th>
        <th>Has a Graphic</th>
    </tr>
    <tr>
        <td>T-Shirt</td>
        <td>threadless</td>
        <td>Last 3 Months</td>
        <td>Purchased</td>
        <td>Monthly</td>
        <td>India</td>
        <td>Yes</td>
    </tr>
    <tr>
        <td>T-Shirt</td>
        <td>RVCA</td>
        <td>2 Years Ago</td>
        <td>Purchased</td>
        <td>Bi-Monthly</td>
        <td>Mexico</td>
        <td>Yes</td>
    </tr>
</table>

到这样的数组中：

var tableData = [
    
        category: "T-shirt",
        brandName: "threadless",
        whenObtained: "Last 3 Months",
        howObtained: "Purchased",
        howOftenWorn: "Monthly",
        whereMade: "India",
        hasGraphic: "Yes"
    ,
    
        category: "T-shirt",
        brandName: "RVCA",
        whenObtained: "2 Years Ago",
        howObtained: "Purchased",
        howOftenWorn: "Bi-Monthly",
        whereMade: "Mexico",
        hasGraphic: "Yes"
    
]

我希望为此使用 jQuery，并且想知道解决此问题的最佳方法是什么。

【问题讨论】：

类似问题***.com/questions/1872485/…

@JamesMontagne 我什至不确定是否要开始这样做，因为它超出了我目前的技能水平。因此，很遗憾，我无法尝试任何事情。

如果我不想用 JSON 来做呢？

【参考方案1】：

有关示例，请参阅 here。我在下面包含了相关代码：

$(function() 
    var $rows= $("#tableName tbody tr");      
    var data = [];

    $rows.each(function(row, v) 
        $(this).find("td").each(function(cell, v) 
            if (typeof data[cell] === 'undefined') 
                data[cell] = [];
            
            data[cell][row] = $(this).text();
        );
    );

    console.log(data);
);

【参考方案2】：

var table = document.getElementById( "dataTable" );
var tableArr = [];
for ( var i = 1; i < table.rows.length; i++ ) 
    tableArr.push(
        category: table.rows[i].cells[0].innerhtml,
        brandName: table.rows[i].cells[1].innerHTML,
        whenObtained: table.rows[i].cells[2].innerHTML,
        howObtained: table.rows[i].cells[3].innerHTML,
        howOftenWorn: table.rows[i].cells[4].innerHTML,
        whereMade: table.rows[i].cells[5].innerHTML,
        hasGraphic: table.rows[i].cells[6].innerHTML
    );

【参考方案3】：

所以我所做的是选择所有 tr 元素并遍历它们。接下来我检查以确保我没有查看th 元素。然后我使用cols 数组来填充对象。这本来可以更简单（二维数组），但我使用cols，因为这是您的输出。

var i, items, item, dataItem, data = [];
var cols = [ "category", "brandName", "whenObtained", "howObtained", "howOftenWorn",
 "whereMade", "hasGraphic" ];

$("#dataTable tr").each(function() 
    items = $(this).children('td');

    if(items.length === 0)  // return if this tr only contains th
        return;
    

    dataItem = ;
    for(i = 0; i < cols.length; i+=1) 
        item = items.eq(i);
        if(item) 
            dataItem[cols[i]] = item.html();
        
    
    data.push(dataItem);
);

【参考方案4】：

下面的应该做！

var array = [];
var headers = [];
$('#dataTable th').each(function(index, item) 
    headers[index] = $(item).html();
);
$('#dataTable tr').has('td').each(function() 
    var arrayItem = ;
    $('td', $(this)).each(function(index, item) 
        arrayItem[headers[index]] = $(item).html();
    );
    array.push(arrayItem);
);

See here for jsFiddle

【讨论】：

$.each($('#dataTable th'), function(index, item) 可以是$('#dataTable th').each(function(index, item) 。

如果我不想得到最后一列呢？

【参考方案5】：

有一个很好的工具：$(table).map，但遗憾的是，它总是返回扁平数组，无论里面有多少嵌套的 .map()（你需要两个：一个用于行，一个用于单元格）。

所以让我们对表格使用 jQuery.map，对单元格使用 tr's 和 object.map()，让第二个嵌套级别返回一个数组

function t2a (tabble)
return $.map($(tabble),function(el,i) 
    return $.map($(el).find('tr'),function(el,i) 
        return [
            $(el).find('td').map(function() 
                return $(this).text();
            ).get()
        ];
    );
);