需要获取使用jQuery选择了哪个单元格的表行数据

时间:2018-03-08 16:11:44

标签: javascript jquery datatables

要求很小,我必须在表格中选择多个单元格。一旦我们点击提交按钮,我们就必须在警报消息中显示每个单元格的相应行数据。 我尝试使用下面的代码,我获取单元格数据,但是获取相应单元格的行数据很麻烦。任何人都可以帮助我, 这是示例代码。

$(document).ready(function() {
    var table = $('#example').DataTable();
    $('#example tbody').on( 'click', 'td', function () {
         $(this).toggleClass('selected'); 
        // alert(table.cell( this ).data());
    } );

    $('#button').click(function() {
        var rowdata = table.rows('.selected').data();
        var cellData = table.cells('.selected').data();
        //console.log(cellData);
        var consoleMsg = '';
        for (var i = 0; i < cellData.length; i++) {
            consoleMsg += cellData[i]+'\n';
            //consoleMsg += rowdata[i]+'\n';
        }
        alert(consoleMsg);
    });
});

Fiddle

1 个答案:

答案 0 :(得分:1)

我找到了你需要的解决方案。试试这个:

$(function () {
    var table = $('#example').DataTable();
    var columnsNames = table.settings()[0].aoColumns.map(function (column) {
        return column.sTitle;
    });

    $('#example tbody').on('click', 'td', function () {
        $(this).toggleClass('selected');
    });

    $('#button').click(function () {
        var selectedCells = table.cells('.selected');
        var selectedCellsAddresses = selectedCells[0];
        var selectedCellsData = selectedCells.data();
        var selected = [];
        var columnName;

        selectedCellsAddresses.forEach(function (cell, index) {
            if (!selected[cell.row]) {
                selected[cell.row] = {};
            }

            columnName = columnsNames[selectedCellsAddresses[index].column];

            selected[cell.row][columnName] = selectedCellsData[index]
        });

        console.log(selected);
        alert(JSON.stringify(selected));
    });
});

Fiddle

您可以使用selected变量执行任何操作。 :)