选择表格单元格为一组

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

小提琴

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

-帮助 ：）