在javascript中将html表转换为数组

Posted 2023-03-05

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

【英文标题】：Convert html table to array in javascript

【发布时间】：2012-03-23 16:43:05

【问题描述】：

如何将 html 表格转换为 javascript 数组？

<table id="cartGrid">
  <thead>
       <tr>
          <th>Item Description</th>
          <th>Qty</th>
          <th>Unit Price</th>
          <th>Ext Price</th>
       </tr>
  </thead>
<tbody>
    <tr><td>Old Lamp</td><td>1</td><td>107.00</td><td>107.00</td>
    <tr><td>Blue POst</td><td>2</td><td>7.00</td><td>14.00</td>
</tbody>
</table>

【问题讨论】：

当然可以。您在执行此操作时究竟在哪里遇到问题？只需逐行逐个单元格读取表格并将内容添加到数组中。

【参考方案1】：

这是一个做你想做的事的例子。

var myTableArray = [];

$("table#cartGrid tr").each(function() 
    var arrayOfThisRow = [];
    var tableData = $(this).find('td');
    if (tableData.length > 0) 
        tableData.each(function()  arrayOfThisRow.push($(this).text()); );
        myTableArray.push(arrayOfThisRow);
    
);

alert(myTableArray);

您可能会对此进行扩展，例如，使用 TH 的文本为每个 TD 创建一个键值对。

由于此实现使用多维数组，您可以通过执行以下操作来访问行和 td：

myTableArray[1][3] // Fourth td of the second tablerow

编辑：这是您的示例的小提琴：http://jsfiddle.net/PKB9j/1/

【讨论】：

您会希望选择器比“table tr”更具体，特别是如果您在任何地方使用表格进行布局，因为这会找到所有 tr（可能在其他嵌套表格中）在一张桌子里面。鉴于更新的 HTML，选择器将是 $('#cartGrid')。

是的，我知道。但似乎 OP 对 JS 和 jQuery 不太有信心，这很好，但我想指出，以防他们只是复制粘贴你的代码，如果他们碰巧使用嵌套表会得到完全意想不到的结果布局。

如果我想在转换表格时在我的数组上添加字段。我该怎么做？

只需使用<arrayName>.push(<object>);-syntax 将内容添加到数组中。示例：arrayOfThisRow.push("This value was added manually!");

【参考方案2】：

这个函数会转换一个 Html 表（只需给出 id）并返回一个表数组：

            function table_to_array(table_id) 
                    myData = document.getElementById(table_id).rows
                    //console.log(myData)
                    my_liste = []
                    for (var i = 0; i < myData.length; i++) 
                            el = myData[i].children
                            my_el = []
                            for (var j = 0; j < el.length; j++) 
                                    my_el.push(el[j].innerText);
                            
                            my_liste.push(my_el)

                    
                    return my_liste
            

希望对你有帮助！

【讨论】：

如何只得到可见的线条？

@youcef-ali 这真的很好，因为它是 vanilla javascript 并且可以工作。虽然您能否建议如何管理第一行 TH 元素的数据属性？我的意思是 THEAD 行，对于 TH 元素中的用户，我想显示漂亮的字符串，而（然后）在相同的 TH 中，我想以这样的方式设置数据属性以构建一个数组（如最终目标）发布到一些 php 以进行 mysql 更新。感谢您的提示和提示（意思是在我的想法中，数据属性将存储DB列真实名称）

@youcef-ali 以前的意思是：从 THEAD 行获取数据属性而不是 TH 内容，而从 TD 获取内容。谢谢。

【参考方案3】：

这是打字稿解决方案：

function getTableContent(table: HTMLTableElement): string[][] 
    return Array.from(table.rows).reduce((acc, row) => 
        const columns = Array.from(row.children)
            .map(column => column.textContent || '')

        return acc.concat(columns);
    , [] as string[][])