javascript - HTML テーブルからの列の取得

Question

JavaScriptを使用してHTMLテーブルの1列から値を取得する方法は?

動的に作成された HTML テーブルから 1 つのフィールド、つまり 1 つの列の値を取得したいと考えています。

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;
}