在javascript中将html表转换为数组

IT技术 javascript jquery html arrays html-table
2021-02-24 15:30:50

如何将 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>
3个回答

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

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/

只需使用<arrayName>.push(<object>);-syntax 将内容添加到数组中。例子:arrayOfThisRow.push("This value was added manually!");
2021-04-16 15:30:50
是的,我知道。但似乎 OP 对 JS 和 jQuery 不太有信心,这很好,但我想指出这一点,以防他们只是复制粘贴您的代码并得到完全出乎意料的结果,如果他们碰巧使用嵌套表布局。
2021-05-01 15:30:50
如果我想在转换表时在我的数组上添加字段。我怎样才能做到这一点?
2021-05-05 15:30:50
与“table tr”相比,您希望选择器更具体,尤其是当您在任何地方使用表格进行布局时,因为这会找到表格内的所有 tr(可能在其他嵌套表格内)。给定更新的 HTML,选择器将是$('#cartGrid').
2021-05-16 15:30:50

这是一个函数转换一个 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
            }

希望对你有帮助!

我如何只获得可见的线条?
2021-04-19 15:30:50
@youcef-ali 以前的意思是:从 THEAD 行获取数据属性而不是 TH 内容,而从 TD 获取内容。谢谢你。
2021-05-05 15:30:50
@youcef-ali 这真的很好,因为它是普通的 javascript 并且有效。虽然您能建议如何管理第一行 TH 元素的数据属性吗?我的意思是, THEAD 行,对于 TH 元素中的用户,我想显示漂亮的字符串,而(然后)在相同的 TH 中,我想以这种方式设置数据属性来构建一个数组(如最终目标)将 POST 发送到一些 PHP 以进行 mysql 更新。谢谢你的提示和技巧(意思是在我的想法中,data属性会存储DB列的实名)
2021-05-14 15:30:50

这是typescript解决方案:


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[][])
}