限制多个表上单元格的选择

Question

我的目标是使用jquery来限制每个显示的表中所选单元格的数量。

经过一些修改，我设法获得了一些工作代码来限制选择范围，但无法弄清楚如何区分表（即，每个表最多可以选择4个单元格）。

任何帮助，将不胜感激。

这是小提琴的链接 。

我还发布了下面的jQuery。

谢谢。

function selectCount () {
var num1;
 num1 =  $.grep($('td'),function(TD){
   return $(TD).css('background-color') == 'rgb(153, 153, 153)' ;
}).length;   
return num1;
}

$(function () {
var isMouseDown = false; 



 //    $(#$(this).closest('table').attr('id') "td")

$("#our_table td")
.mousedown(function () {
  isMouseDown = true;

    var sCount = selectCount();


    if (sCount < 4 || $(this).css('background-color')== 'rgb(153, 153, 153)')
  $(this).toggleClass("highlighted");
  return false; // prevent text selection
})

.mouseover(function () {       
   var foo = selectCount();
  if (isMouseDown && sCount < 4 ||isMouseDown &&  $(this).css('background-color')== 'rgb(153, 153, 153)') {
    $(this).toggleClass("highlighted");
  }
});

$(document)
.mouseup(function () {
  isMouseDown = false;
});
});

Answer 1

jQuery('table').on('click', function (e) {
    var ourTable = jQuery(e.target).closest('table');
    var sCount = ourTable.find('.highlighted').length;

    if (sCount < 4 || $(e.target).hasClass('highlighted')) {
        $(e.target).toggleClass("highlighted");
    }
  e.preventDefault();
});

这是小提琴http://jsfiddle.net/h18yr46a/7/

实际上，您可以将整个过程简化为四行：

jQuery('table').on('click', function (e) {
    if (jQuery(this).find('.highlighted').length < 4 || $(e.target).hasClass('highlighted')) {
            $(e.target).toggleClass("highlighted");
    }
    e.preventDefault();
});