需要获取使用jQuery选择单元格的表格行数据(Need to get the table row data for which cell is selected using jQuery)

有小的要求，我不得不选择表中的多个单元格。一旦我们点击提交按钮，我们必须在警报消息中显示每个单元的相应行数据。我尝试使用下面的代码，即时获取单元格数据，但却无法获取各个单元格的行数据。任何人都可以帮我解答，下面是示例代码。

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

小提琴

Have small requirement, I have to select multiple cells in a table. Once we click on submit button we have to show the respective row data of the each cell in alert message. I tried with below code, im getting cell data, but getting trouble to fetch row data of respective cell. Can any one help me pls, Here is the sample code.

$(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

最满意答案

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

$(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变量做任何你想做的事情。 :)

I found the solution you need. Try this:

$(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

you can do whatever you want with that selected variable. :)

更多推荐