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

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

Answer 2

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

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 3

如果您的表结构已修复，那么

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

Demo

使用jQuery提取表信息

3 个答案: