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

Question

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

通过一些修补，我设法获得一些工作代码来限制选择，但无法弄清楚如何区分表格(即每个表格最多可以选择 4 个单元格)。

如有任何帮助，我们将不胜感激。

这是link到 fiddle 。

我还在下面发布了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();
});

这是 fiddle 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();
});