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?

Answer 1

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

Answer 2

You have two significant issues:

1. When looking at row "n" you only need to compare other rows starting from row "n + 1", not from the start

2. 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/