选择表格单元格作为组

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函数来实现。 我做了一个小提琴来获得您期望的输出。

Fiddle

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

-帮助：）