从 HTML 表中检索列

Question

如何使用 JavaScript 从 HTML 表格的一列中获取值？

我想获取一个字段的值，即动态创建的 HTML 表中的一列。

Answer 1

如果你使用 jQuery，你可以使用这个插件

$.fn.getColumn = function(column) {
    return this.find('tr').map(function() {
        return $(this).find('td').eq(column).text();
    }).get();
};

使用：

$('table').getColumn(1);

没有 jQuery 就会这样

function getColumn(selector, column) {
    var rows = document.querySelector(selector).getElementsByTagName('tr');
    return [].slice.call(rows).map(function(tr) {
        return tr.getElementsByTagName('td')[column].innerText;
    });
}

Answer 2

动态创建表时，必须为表分配一些 id，因此请尝试以下操作：

var allTDs = document.getElementById('<TableId>').getElementsByTagName('TD');
var valueNeeded = allTDs[0].innerHTML;

如果您想获取所有行中所有第一列的值，请使用以下命令：

var allTRs = document.getElementById('<TableId>').getElementsByTagName('TR');
for(var i = 0; i < allTRs .length; i++)
{
    //This is a loop so store the value of each TD or column wherever you want to  
    var valueNeeded = allTDs.getElementsByTagName('TD')[0].innerHTML;
}

Answer 3

这个答案的灵感来自于jcubic的答案。这种功能方法也适用于具有标题行的表格。

[].slice.call(document.querySelector("table")
.getElementsByTagName("tr"))
.map(tr => tr.getElementsByTagName('td'))
.filter(tr => tr.length > 0)
.map(tr => tr[column_index].innerText)