获取鼠标悬停在带有JavaScript的表上时选定的列数和行数

基于创建下图的HTML表

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

SizeChooser hover

当他们为该表选择所需的列和行并单击它时，会将CSS类

sizechoser selected

添加到正方形中的所有单元格中

然后，它还会将列数和行数输入到JavaScript变量中

有人能帮我做到这一点吗？这里我的JSFiddle有表格的HTML

---

添加CSS类`选定单元格

编辑：这只是用于悬停

$('table td').on('mouseover', function(){
    //remove the current selected
    $('table td').removeClass('SizeChooser-hover');
    //get the indices (position)
    var x = $(this).index();
    var y = $(this).parent().index();
    //iterate over each row
    $('table tr').each(function(){
        //if the row is less than or equal to the selected row
        if($(this).index() <= y){
            //iterate over each cell in the row
            $(this).children('td').each(function(){
                //if the cell is less than or equal; add the class
                $(this).toggleClass('SizeChooser-hover', $(this).index() <= x);
            });
        };
    });
});

var列；
var行；
$（函数（）{
$（'td'）。悬停（函数（）{
var n=$（this.index（）；
var m=$（this.parent（'tr'）.index（）；
$（'td'）.removeClass（'SizeChooser-hover'）；
$（'tr'）。每个（函数（y）{
$（this.find（'td'）。每个（函数（x）{
如果（x感谢这很接近，它有一些奇怪的行为，你可以在演示中看到，有什么解决办法吗？我想这是因为我忘了用正确的类更新
removeClass
方法。我想你可以用另一个答案。谢谢，这太棒了，我在网上找不到任何示例！最终产品使用你的代码来为降价表生成降价语法。有很大的改进空间，但现在仍然有效。再次感谢
$('table td.SizeChooser-hover').on('click', function(){
    $('.SizeChooser-hover').toggleClass('SizeChooser-hover Sizechooser-selected');
});

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');
  });
});