Filtering HTML table rows in Jquery

Question

Could you please help me? What I am doing is removing the duplicate html table rows. The following is my code.

    $("table#" + Grid + " > tbody  > tr").each(function () {

         ParentID = $(this).find("td:eq(0) input:checkbox").val();
         ParentManufacturer = $(this).find("td:eq(2)").html();

         $("table#" + Grid + " > tbody  > tr").each(function () {

              ChildID = $(this).find("td:eq(0) input:checkbox").val();
              ChildManufacturer = $(this).find("td:eq(2)").html();                 

              if (ParentID != ChildID && ParentManufacturer == ChildManufacturer) {
                   $(this).remove();
              }
         });
    });

The issue is the removed table rows are still doing the loop. Eg. even though I've removed the table row with manucafturer name 'AAA', this row is still in the loop. Hope you understand what i mean. So, the final result is the empty table. Could you pls help me to fix this issue?

What about $("tr:has(input[value=" + value + "])").remove()? — jantimon
– jantimon, Commented Oct 30, 2013 at 16:37
@jantimon insufficient - he must still start by iterating over each <tr> and the consider all following <tr> elements. — Alnitak
– Alnitak, Commented Oct 30, 2013 at 16:38
@Alnitak you are right but he could use api.jquery.com/nextAll — jantimon
– jantimon, Commented Oct 30, 2013 at 16:42

Alnitak · Accepted Answer · 2013-10-30 16:54:46Z

You have two significant issues:

When looking at row "n" you only need to compare other rows starting from row "n + 1", not from the start
Removing elements from the DOM will not remove them from the jQuery object over which you are currently iterating...

The code below appears to work. It looks at each row in turn, and then tags any following row - .nextAll('tr') - with the class remove if its second cell has the same contents. It then does all the DOM removals afterwards.

// get all rows
var $tr = $("table#" + Grid + " > tbody  > tr");

// then for each row
$tr.each(function() {

    if ($(this).hasClass('remove')) return;  // we already did this value
    var val = $(this.cells[1]).text();       // get current row's value

    // tag matching following rows
    $(this).nextAll('tr').not('.remove').filter(function() {
        return $(this.cells[1]).text() === val;
    }).addClass('remove');       

});

// now remove the tagged rows
$tr.filter('.remove').remove();

Working demo at http://jsfiddle.net/alnitak/ZzsTt/

ilgofat · Accepted Answer · 2013-10-30 22:08:05Z

you could use a while loop instead, you have to save your elements first in a array and iterate over it yourself. of course you need another boolean expression to compare if they match your criteria.

var a=[1,2,3,4,5,4,3,2,1];
var i=0;
while(a.length > 0 && i<a.length){
  console.log("check elem:" + a[i]);
  var j=i+1;
  var double = false;
  while(j < a.length ){
    if(a[i]==a[j]){
      a.splice(j,1);
      double=true;
    } else {
      j++;
    }
  }
  if(double){
    a.splice(i,1);
  } else {
    i++;
  }
}

in this example only 5 ist left in the array

fitted my solution in the jsfiddle above http://jsfiddle.net/ZzsTt/19/

var Grid = "table";
// get all rows
var rows = $("table#" + Grid + " > tbody  > tr");
rows = $.makeArray(rows);

var i=0;
while(rows.length > 0 && i<rows.length){
 var j=i+1;
  var double = false;
  var val = $(rows[i].cells[1]).text();
  while(j < rows.length ){
    if( $(rows[j].cells[1]).text() == val ){
      $(rows[j]).addClass("remove");
      //$(rows[j]).remove();
      rows.splice(j,1);
      //uncomment statement below to have all elements which occur more than once
      //otherwise first stays

      //double=true;
    } else {
      j++;
    }
  }
  if(double){
   $(rows[j]).addClass("remove");  
   //$(rows[i]).remove();  
   rows.splice(i,1);   
  } else {
    i++;
  }
}

Collectives™ on Stack Overflow

Filtering HTML table rows in Jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related