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

问题描述：

是否有办法将每个表格选定的单元格数量限制为2？限制多个表格中的单元格选择

我试过使用最接近的方法，但我似乎并没有工作（我不能正确使用它）。

我在jquery上的尝试是在下面，这里是 Fiddle。

$(function() { 
 
    $('.css-table-td').click(function() { 
 
    var theTable = $(this).closest('css-table'); 
 
    var sCount = $('.highligh-cell').length; 
 
    //code below not working 
 
    //if (sCount < 3 || $(e.target).hasClass('highlighted')) 
 
    $(this).toggleClass("highligh-cell"); 
 
    }); 
 
});

.css-table { 
 
    display: table; 
 
    background-color: #ccc; 
 
    width: 60px; 
 
} 
 
.css-table-tr { 
 
    display: table-row; 
 
} 
 
.css-table-td { 
 
    display: table-cell; 
 
    border: 1px solid #fff; 
 
    width: 30px; 
 
    height: 30px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 
.highligh-cell { 
 
    background: #999; 
 
}

<div class="css-table"> 
 
    <div class="css-table-tr"> 
 
    <div class="css-table-td" id="1">b</div> 
 
    <div class="css-table-td" id="2">c</div> 
 
    </div> 
 
    <div class="css-table-tr"> 
 
    <div class="css-table-td" id="3">e</div> 
 
    <div class="css-table-td" id="4">f</div> 
 
    </div> 
 
</div> 
 
<br/> 
 
<div class="css-table"> 
 
    <div class="css-table-tr"> 
 
    <div class="css-table-td" id="5">b</div> 
 
    <div class="css-table-td" id="6">c</div> 
 
    </div> 
 
    <div class="css-table-tr"> 
 
    <div class="css-table-td" id="7">e</div> 
 
    <div class="css-table-td" id="8">f</div> 
 
    </div> 
 
</div> 
 
<INPUT TYPE="submit" id="csstableinfo" VALUE="css info">

你需要什么方式，你能否解释清楚。 – stanze

答

一些变化：

使用.length财产相对于根父css-table - .closest(..).find('..')
$(this).closest('css-table');应该是$(this).closest('.css-table');。类别选择器有一个.：.className'。

$('.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"); 
    } 
});

Updated Fiddle

非常感谢。我一直在研究这一点。我的下一步是显示单击css info时所选的所有单元格。我会尽力弄清楚。再次感谢你的帮助。 – user1763812

答

您需要在您的onclick功能$('.css-table-td').click(function(e) {正确定义事件变量，而您只需要当前表中进行搜索（如果你想允许两个点击每个表）像这样var sCount = $('.highligh-cell',theTable).length;

$(function() { 
 
    $('.css-table-td').click(function(e) { 
 
    var theTable = $(this.parentNode.parentNode); 
 
    var sCount = $('.highligh-cell',theTable).length; 
 
    if (sCount < 2 || $(e.target).hasClass('highligh-cell')) 
 
     $(this).toggleClass("highligh-cell"); 
 
    }); 
 
});

.css-table { 
 
    display: table; 
 
    background-color: #ccc; 
 
    width: 60px; 
 
} 
 
.css-table-tr { 
 
    display: table-row; 
 
} 
 
.css-table-td { 
 
    display: table-cell; 
 
    border: 1px solid #fff; 
 
    width: 30px; 
 
    height: 30px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 
.highligh-cell { 
 
    background: #999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="css-table"> 
 
    <div class="css-table-tr"> 
 
    <div class="css-table-td" id="1">b</div> 
 
    <div class="css-table-td" id="2">c</div> 
 
    </div> 
 
    <div class="css-table-tr"> 
 
    <div class="css-table-td" id="3">e</div> 
 
    <div class="css-table-td" id="4">f</div> 
 
    </div> 
 
</div> 
 
<br/> 
 
<div class="css-table"> 
 
    <div class="css-table-tr"> 
 
    <div class="css-table-td" id="5">b</div> 
 
    <div class="css-table-td" id="6">c</div> 
 
    </div> 
 
    <div class="css-table-tr"> 
 
    <div class="css-table-td" id="7">e</div> 
 
    <div class="css-table-td" id="8">f</div> 
 
    </div> 
 
</div> 
 
<INPUT TYPE="submit" id="csstableinfo" VALUE="css info">

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

相关推荐