Question

有没有办法将为每个表选择的单元格数量限制为2？

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

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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">

＆＃13;

Answer 1

几乎没有变化：

针对根父.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

Answer 2

您需要在onclick函数$('.css-table-td').click(function(e) {中正确定义事件变量，并且您只需要在当前表中搜索（如果您希望在每个表中允许两次点击），例如var sCount = $('.highligh-cell',theTable).length; < / p>

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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">

＆＃13;

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

2 个答案: