需要获取使用jQuery为其选择单元格的表行数据

Question

要求不高，我必须在一个表中选择多个单元格。 单击提交按钮后，我们必须在警报消息中显示每个单元格的相应行数据。 我尝试使用下面的代码，即时获取单元格数据，但在获取各个单元格的行数据时遇到了麻烦。 谁能帮助我，这是示例代码。

$(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);
    });
});

小提琴

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

小提琴

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