Javascript 限制在多个表中选择单元格

是否有办法将每个表所选的单元格数量限制为2个

我尝试过使用最接近的方法，但我认为它似乎不起作用（我一定没有正确使用它）

下面是我对jquery的尝试，下面是

$（函数（）{
$（'.css table td'）。单击（函数（）{
var theTable=$（this）.closest（'css-table'）；
var scont=$（'.highligh单元格'）。长度；
//下面的代码不工作
//if（scont<3 | |$（e.target）.hasClass（'highlighted'））
$（this.toggleClass（“高亮度单元格”）；
});
});
.css表{
显示：表格；
背景色：#ccc；
宽度：60px；
}
.css表格tr{
显示：表格行；
}
.css表格td{
显示：表格单元格；
边框：1px实心#fff；
宽度：30px；
高度：30px；
文本对齐：居中；
垂直对齐：中间对齐；
}
.高亮度电池{
背景：#999；
}

B
C
E
F


B
C
E
F
几乎没有变化：

对根父级css表使用
.length
属性

$（this）.closest（'css-table'）
应该是
$（this）.closest（'.css table'）。类选择器有一个
：
.className'


$（'.css table td'）。单击（函数（）{
var theTable=$（this）.closest（'.css table'）；
var scont=table.find（'.css table td.highligh cell'）.length；
if（scont<2 | |$（this）.hasClass（“高亮度单元格”））{
$（this.toggleClass（“高亮度单元格”）；
}
});

您需要在onclick函数
$（'.css table td'）中正确定义事件变量。单击（函数（e）{
，您只需要在当前表中搜索（如果希望在每个表中允许两次单击），如下
var sCount=$（'.highligh cell'，the table）。长度；


$（函数（）{
$（'.css table td'）。单击（函数（e）{
var theTable=$（this.parentNode.parentNode）；
var scont=$（'.highligh cell'，表格）。长度；
if（scont<2 | |$（e.target）.hasClass（'highligh-cell'））
$（this.toggleClass（“高亮度单元格”）；
});
})；
.css表{
显示：表格；
背景色：#ccc；
宽度：60px；
}
.css表格tr{
显示：表格行；
}
.css表格td{
显示：表格单元格；
边框：1px实心#fff；
宽度：30px；
高度：30px；
文本对齐：居中；
垂直对齐：中间对齐；
}
.高亮度电池{
背景：#999；
}

B
C
E
F


B
C
E
F
您需要什么样的方式，请您解释清楚。非常感谢。我已经为此工作了一段时间。我的下一步是显示单击css信息时选择的所有单元格。我将尝试找出答案。再次感谢您的帮助。
$('.css-table-td').click(function () {
    var theTable = $(this).closest('.css-table');
    var sCount = theTable.find('.css-table-td.highligh-cell').length;
    if (sCount < 2 || $(this).hasClass("highligh-cell")) {
        $(this).toggleClass("highligh-cell");
    }
});