选择表格单元格作为组

Question

在此表中，我想选择多个单元格作为一个组。 您可以通过单击来选择目标单元格，但我也想单击并拖动以将多个单元格作为一个组覆盖。

是否有可能在没有任何插件的情况下实现这一目标（仅使用JQuery）？

这是我要实现的目标：

数组内容将为： ["3-2", "3-3", "4-2", "4-3", "5-2", "5-3"]

到目前为止，这是我尝试的方法：

 var group = []; var columnIndex = 7, rowIndex = 10; var $tableContainer = $('#tablecontainer'), $table = $tableContainer.append('<table border="1" id="table1"></table>'), $thead = $table.find('table').append('<thead></thead>'), $tbody = $table.find('table').append('<tbody></tbody>'); var $columnNumber = ""; var $tdNumber = ""; for (var col = 1; col <= columnIndex; col++) { $columnNumber += "<th>Column " + col + "</th>"; $tdNumber += "<td style='text-align: center; vertical-align: middle; color:red'></td>"; } $thead = $thead.append('<tr><th>0</th>' + $columnNumber + '</tr>'); for (var row = 1; row <= rowIndex; row++) { $tbody = $tbody.append('<tr><td>Row ' + row + '</td>' + $tdNumber + '</tr>'); } $('#table1 > tbody > tr > td').hover(function() { var colIndex = $(this).parent().children().index($(this)); var rowIndex = $(this).parent().parent().children().index($(this).parent()); $(this).attr("title", 'Row: ' + rowIndex + ', Column: ' + colIndex); // console.log('Row: ' + rowIndex + ', Column: ' + colIndex); }); $('#table1 > tbody > tr > td').click(function() { var colIndex = $(this).parent().children().index($(this)); var rowIndex = $(this).parent().parent().children().index($(this).parent()); group.push(rowIndex + "-" + colIndex); console.log(group); $(this).css("background-color", "red"); // console.log('Row: ' + rowIndex + ', Column: ' + colIndex); }); 

 #table1>tbody>tr>td:hover { background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tablecontainer"></div> 

任何帮助，将不胜感激！

Answer 1

您可以通过使用jquery mouseover函数来实现您想要的功能。 我做了一个小提琴以获得期望的输出。

小提琴

希望这可以帮助您解决问题。

-救命 ：）