jquery - 使用jQuery提取表信息

Question

我有一个如下表，它是数据表的过滤结果。我试图在元组或数组中获取整个表信息，
例如 [("1","abc@gmail.com"),("2","xyz@gmail.com"), ("3"," pqr@gmail.com")]
我将有超过 2 列和许多行。如何通过 jQuery 实现这一点。

<table id='mytable' border='1'>
    <tr>
        <th id='ID'>ID</th>
        <th id='Email'>Email</th>
    </tr>
    <tr>
        <td>1</td>
        <td>abc@gmail.com</td>
    </tr>
    <tr>
        <td>2</td>
        <td>xyz@gmail.com</td>
    </tr>
    <tr>
        <td>3</td>
        <td>pqr@gmail.com</td>
    </tr>
</table>

<button id='gen'>Print Information</button>

链接到 jsfiddle：http:
//jsfiddle.net/xLA3g/8/

Answer 1

从以标题为键的表中获取列数据的通用方法：

jsFiddle：http: //jsfiddle.net/xLA3g/11/

基于您上面的 HTML。

$(document).ready(function () {
    $("#plot").click(function () {
        var headers = $.makeArray($('#mytable th').map(function() {
            return $(this).text();
        }));

        var data = [];
        $('#mytable tr').each(function(cRowIndex, cRow) {
            var cRowData = {};

            $(cRow).find('td').each(function(cIndex, cTD) {
                cRowData[headers[cIndex]] = $(cTD).text();
            });

            if ($(cRow).find('td').length) {
                data.push(cRowData);
            }
        });

        alert(JSON.stringify(data));
    });
});

这可以转换为插件：

$.fn.getTableData = function() {
    var headers = $.makeArray($(this).find('th').map(function() {
        return $(this).text();
    }));

    var data = [];
    $(this).find('tr').each(function(cRowIndex, cRow) {
        var cRowData = {};

        $(cRow).find('td').each(function(cIndex, cTD) {
            cRowData[headers[cIndex]] = $(cTD).text();
        });

        if ($(cRow).find('td').length) {
            data.push(cRowData);
        }
    });

    return data;    
};

称为：

$(document).ready(function () {
    $("#plot").click(function () {
        var data = $('#mytable').getTableData();
        alert(JSON.stringify(data));
    });
});

jsFiddle（插件）：http: //jsfiddle.net/xLA3g/16/

Answer 2

var data = $('#mytable tr:gt(0)').map(function () {
    return $(this).find('td').map(function () {
        return $(this).text();
    }).get();
}).get();

Answer 3

如果你的表结构是固定的，

$(document).ready(function () {
    var tuple = [];
    $('#mytable tr:gt(0)').each(function(i) {
       $('td', this).each(function() {
          tuple[i] = $(this).text();
       });
    });
    console.log(tuple);
});

演示