javascript - 使用 JavaScript 获取当鼠标悬停在表格上时选择的列数和行数

Question

基于创建以下图像的 HTML 表格....

我需要允许用户将鼠标移到表格单元格上，当它们向右和向上/向下移动时，将 CSS 类添加到覆盖空间中的每个单元格 SizeChooser-hover.

当他们为表格选择所需的列和行并单击它时，会将 CSS 类 SizeChooser-selected 添加到正方形中的所有单元格。

然后它还会将列数和行数获取到 JavaScript 中的变量中。

有人可以帮我实现这个目标吗？我的 JSFiddle 这里有表 https://jsfiddle.net/qxavaja9/ 的 HTML

添加 CSS 类 `cell-selected

Answer 1

var columns;
var rows;
$(function() {
  $('td').hover(function() {
    var n = $(this).index();
    var m = $(this).parent('tr').index();
    $('td').removeClass('SizeChooser-hover');
    $('tr').each(function(y) {
      $(this).find('td').each(function(x) {
        if (x <= n && y <= m) {
          $(this).addClass('SizeChooser-hover');
        }
      })
    })
  }).click(function(){
    columns = $(this).index();
    rows = $(this).parent('tr').index();
    $('td').removeClass('SizeChooser-selected');
    $('td.SizeChooser-hover').addClass('SizeChooser-selected');
  });
});

https://jsfiddle.net/qxavaja9/15/

列和行就是你想要的。