CODEWITHSUNDEEP
jquery
J.J
J.J

Reputation: 63

Counting the highlighted cells in html table

I am trying to count the number of selected cells (clicked cells in each row), and show the count in a cell on the right of table.

The code:

$(function() {
  $('td').click(function() {
    $(this).toggleClass("selectedCell");
  });
});

function update_counts() {
  $('.tdoutput').html('');
  $('.row').each(function(index) {
    $('.tdoutput').html($('.tdoutput').html() + $(this).find('.selectedCell').length + ' selected cells ');
  });
}

$('.td').click(function() {
  // Add or remove class
  $(this).toggleClass('selectedCell');
  // Update the class counts
  update_counts();

});

// Run the function on domready
$(function() {
  update_counts();
});
.selectedCell {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table border="1">
  <tr class="row">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td class="tdoutput"></td>
  </tr>
  <tr class="row">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td class="tdoutput"></td>
  </tr>
</table>

I tried to adapt a code, but I couldn't make it work. Can I get a little help to make it work please? thank you.

Upvotes: 0

Views: 364

Answers (5)

Savas YILDIRIM
Savas YILDIRIM

Reputation: 41

Change your JS to:

function update_counts()
{
    // Clear output
    $('.tdoutput').html('');
    // Each rows,
     $('.row').each(function(index,rowObject){
         // Count has .selectedCell in this row
         var count = $(rowObject).find('td.selectedCell').length;
         // Write to this row output.
         $(rowObject).find('td.tdoutput').html( count + ' selected cells ');
     });  
}

$('td').click(function(){
  // Add or remove class
  $(this).toggleClass('selectedCell');

  // Update the class counts
  update_counts();
}); 



// Run the function on domready 
$(function(){
   update_counts();
});

Upvotes: 1

Khurram Shaikh
Khurram Shaikh

Reputation: 300

here is the working fiddle. I hope I have manage to help you. Slight change in script only. 

<script>
$( function() {
  $('td').click( function() {
    $(this).toggleClass("selectedCell");
    var numItems = $('.selectedCell').length
    $('.tdoutput').html(numItems +" Selected")
    });
});
</script>

https://jsfiddle.net/s73gv6zt/1/

Upvotes: 1

charlietfl
charlietfl

Reputation: 171690

You were close. You need the context of the $('.tdoutput') instance relative to the specific row using either context argument or $(this).find('.tdoutput') inside the rows loop.

function update_counts() {

  $('.row').each(function(index) {
    $('.tdoutput', this).html($(this).find('.selectedCell').length + ' selected cells ');
                // ^^^ only in this row
  });
}



// Run the function on domready
$(function() {
  update_counts();

  $('td').click(function() {
    // Add or remove class
    $(this).toggleClass('selectedCell');
    // Update the class counts
    update_counts();

  });
});
.selectedCell {
  background-color: green;
}
td{padding:5px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table border="1">
  <tr class="row">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td class="tdoutput"></td>
  </tr>
  <tr class="row">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td class="tdoutput"></td>
  </tr>
</table>

Upvotes: 3

Renan Ara&#250;jo
Renan Ara&#250;jo

Reputation: 3641

I think you are looking for something like this:

Use td with closest and tr with find to implement this behaviour.

$(function() {
  $("table tr").each(function() {
    update_counts($(this));
  });
});

function update_counts($tr) {
  var count = $tr.find('.selectedCell').length;
  $tr.find('.tdoutput').html(count + " selected");
}

$('td').click(function() {
  // Add or remove class
  $(this).toggleClass('selectedCell');
  // Update the class counts
  update_counts($(this).closest("tr"));

});
.selectedCell {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table border="1">
  <tr class="row">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td class="tdoutput"></td>
  </tr>
  <tr class="row">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td class="tdoutput"></td>
  </tr>
</table>

Upvotes: 3

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7171

try this code

add update_counts(); in first code of script and remove .td click code 

$(function() {
  $('td').click(function() {
    $(this).toggleClass("selectedCell");
    update_counts(); // add here
  });
});


function update_counts() {
  $('.tdoutput').html('');
  $('.row').each(function(index) {
    //console.log($(this).find('.selectedCell').length, index, 'test');
    $('.tdoutput').html($('.tdoutput').html() + $(this).find('.selectedCell').length + ' selected cells ');
  });
}

// Run the function on domready
$(function() {
  update_counts();
});
.selectedCell {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <tr class="row">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td class="tdoutput"></td>

  </tr>

  <tr class="row">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td class="tdoutput"></td>

  </tr>
</table>

Upvotes: 1

Related Questions