Ограничение выбора ячеек на нескольких таблицах

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