CODEWITHSUNDEEP
javascriptjquerycss
user1763812
user1763812

Reputation: 437

Limit cell selection in multiple tables

Is there a way to limit the amount of cells that are selected for each table to 2?

I have tried using the closest method but I it does not seem to be working (I must not be using it correctly).

My attempt at the jquery is below and here is the 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">

Upvotes: 1

Views: 110

Answers (2)

user4639281
user4639281

Reputation:

You need to properly define the event variable in your onclick function $('.css-table-td').click(function(e) { and you need to only search within the current table (if you want to allow two clicks in each table) like this 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">

Upvotes: 1

Shaunak D
Shaunak D

Reputation: 20636

Few changes :

  1. Use .length property with respect to the root parent css-table - .closest(..).find('..')

  2. $(this).closest('css-table'); should be $(this).closest('.css-table');. Class selector has a . : .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

Upvotes: 2

Related Questions