Question

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

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

任何帮助将不胜感激。

以下是小提琴的link。

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

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

1 个答案: