Jquery: How to remove duplicate HTML TABLE rows based on columns values

Question

Using J-query, how can i remove duplicate rows whose two columns values are repeated, eg. I have 2 columns i.e CA and STATUS, I want to consider unique row to be visible if the STATUS column value is 'PARTIAL' and the CA columns are duplicate.

Current screen: Expected Output screen:

CODE FIDDLE

html code

 <html>
   <HEAD> 
   </HEAD>
   <BODY class="lytBody">
      <FORM name="form0" method="post">
         <TABLE class="lytTable" border="0" bordercolor="#efefef">
            <TR>
               <TD class="lytM"> 
            <tbody>
               <tr>
                  <td class="lytM">
                     <table border="1">
                        <tbody>
                           <tr>
                              <td width="6%" nowrap="nowrap" class="rsDsc">CA</td>
                              <td width="6%" nowrap="nowrap" class="rsDsc">LD</td>
                              <td width="6%" nowrap="nowrap" class="rsDsc">COUNT</td>
                              <td width="16%" nowrap="nowrap" class="rsDsc">NAME</td>
                              <td width="15%" nowrap="nowrap" class="rsDsc">DATE1</td>
                              <td width="10%" nowrap="nowrap" class="rsDsc">STATUS</td>
                              <td width="24%" nowrap="nowrap" class="rsDsc">DATE2</td>
                              <td width="29%" nowrap="nowrap" class="rsDsc">DATE3</td>
                           </tr>
                           <tr>
                              <td width="6%" class="rsData1" valign="middle">BDC</td>
                              <td width="6%" class="rsData1" valign="middle">5861</td>
                              <td width="6%" class="rsData1" valign="middle"></td>
                              <td width="16%" class="rsData1" valign="middle">ABC</td>
                              <td width="15%" class="rsData1">09/12/2011 04:33:20</td>
                              <td width="10%" class="rsData1">
                                 <div align="center"><input type="button" name="loadStatus" valign="middle" size="10" value="PENDING" onclick="javascript:getDetail('BDC','5861', 'PENDING')" class="PENDING"></div>
                              </td>
                              <td width="24%" class="rsData1"><br>
                              </td>
                              <td width="29%" class="rsData1">
                                 09/12/2011 04:33:55                                                
                              </td>
                           </tr>
                           <tr>
                              <td width="6%" class="rsData2" valign="middle">BDC</td>
                              <td width="6%" class="rsData2" valign="middle">21990</td>
                              <td width="6%" class="rsData2" valign="middle">1357</td>
                              <td width="16%" class="rsData2" valign="middle">DEF</td>
                              <td width="15%" class="rsData2">06/11/2015 11:37:58</td>
                              <td width="10%" class="rsData2">
                                 <div align="center"><input type="button" name="loadStatus" style="background-color:yellow;" valign="middle" size="10" value="PARTIAL" onclick="javascript:getDetail('BDC','21990','PARTIAL')" class="PARTIAL"></div>
                              </td>
                              <td width="24%" class="rsData2"> <br>
                                 06/11/2015 16:04:28
                              </td>
                              <td width="29%" class="rsData2">
                                 06/11/2015 16:04:28                                                
                              </td>
                           </tr>
                           <tr>
                              <td width="6%" class="rsData1" valign="middle">BDC</td>
                              <td width="6%" class="rsData1" valign="middle">22366</td>
                              <td width="6%" class="rsData1" valign="middle"></td>
                              <td width="16%" class="rsData1" valign="middle">GHI</td>
                              <td width="15%" class="rsData1">07/29/2015 13:49:25</td>
                              <td width="10%" class="rsData1">
                                 <div align="center"><input type="button" name="loadStatus" valign="middle" size="10" value="PENDING" onclick="javascript:getDetail('BDC','22366', 'PENDING')" class="PENDING"></div>
                              </td>
                              <td width="24%" class="rsData1"><br>
                              </td>
                              <td width="29%" class="rsData1">
                                 07/29/2015 14:28:16                                                
                              </td>
                           </tr>
                           <tr>
                              <td width="6%" class="rsData2" valign="middle">BDC</td>
                              <td width="6%" class="rsData2" valign="middle">22367</td>
                              <td width="6%" class="rsData2" valign="middle">1357</td>
                              <td width="16%" class="rsData2" valign="middle">JKL</td>
                              <td width="15%" class="rsData2">07/29/2015 14:35:19</td>
                              <td width="10%" class="rsData2">
                                 <div align="center"><input type="button" name="loadStatus" valign="middle" size="10" value="PARTIAL" style="background-color:yellow;" onclick="javascript:getDetail('BDC','22367','PARTIAL')" class="PARTIAL"></div>
                              </td>
                              <td width="24%" class="rsData2"> <br>
                                 07/29/2015 15:03:37
                              </td>
                              <td width="29%" class="rsData2">
                                 07/29/2015 15:03:37                                                
                              </td>
                           </tr>
                           <tr>
                              <td width="6%" class="rsData1" valign="middle">BDC</td>
                              <td width="6%" class="rsData1" valign="middle">22369</td>
                              <td width="6%" class="rsData1" valign="middle">1357</td>
                              <td width="16%" class="rsData1" valign="middle">MNO</td>
                              <td width="15%" class="rsData1">07/29/2015 15:14:52</td>
                              <td width="10%" class="rsData1">
                                 <div align="center"><input type="button" name="loadStatus" valign="middle" size="10" value="PARTIAL" style="background-color:yellow;" onclick="javascript:getDetail('BDC','22369','PARTIAL')" class="PARTIAL"></div>
                              </td>
                              <td width="24%" class="rsData1">
                                 07/29/2015 15:52:46
                              </td>
                              <td width="29%" class="rsData1">
                                 07/29/2015 15:52:46                                                
                              </td>
                           </tr>
                           <tr>
                              <td width="6%" class="rsData2" valign="middle">BEX</td>
                              <td width="6%" class="rsData2" valign="middle">9500</td>
                              <td width="6%" class="rsData2" valign="middle"></td>
                              <td width="16%" class="rsData2" valign="middle">PQR</td>
                              <td width="15%" class="rsData2">01/31/2012 00:39:57</td>
                              <td width="10%" class="rsData2">
                                 <div align="center"><input type="button" name="loadStatus" valign="middle" size="10" value="PENDING" onclick="javascript:getDetail('BEX','9500', 'PENDING')" class="PENDING"></div>
                              </td>
                              <td width="24%" class="rsData2"><br>
                              </td>
                              <td width="29%" class="rsData2">
                                 01/31/2012 00:40:58                                                
                              </td>
                           </tr>
                           <tr>
                              <td width="6%" class="rsData1" valign="middle">BID</td>
                              <td width="6%" class="rsData1" valign="middle">9918</td>
                              <td width="6%" class="rsData1" valign="middle"></td>
                              <td width="16%" class="rsData1" valign="middle">STW</td>
                              <td width="15%" class="rsData1">02/10/2012 06:09:50</td>
                              <td width="10%" class="rsData1">
                                 <div align="center"><input type="button" name="loadStatus" valign="middle" size="10" value="PENDING" onclick="javascript:getDetail('BID','9918', 'PENDING')" class="PENDING"></div>
                              </td>
                              <td width="24%" class="rsData1"><br>
                              </td>
                              <td width="29%" class="rsData1">
                                 02/10/2012 06:10:14                                                
                              </td>
                           </tr>
                           <tr>
                              <td width="6%" class="rsData2" valign="middle">BID</td>
                              <td width="6%" class="rsData2" valign="middle">9919</td>
                              <td width="6%" class="rsData2" valign="middle"></td>
                              <td width="16%" class="rsData2" valign="middle">XYZ</td>
                              <td width="15%" class="rsData2">02/10/2012 06:11:55</td>
                              <td width="10%" class="rsData2">
                                 <div align="center"><input type="button" name="loadStatus" valign="middle" size="10" value="PENDING" onclick="javascript:getDetail('BID','9919', 'PENDING')" class="PENDING"></div>
                              </td>
                              <td width="24%" class="rsData2"><br>
                              </td>
                              <td width="29%" class="rsData2">
                                 02/10/2012 06:12:15                                                
                              </td>
                           </tr>
                        </tbody>
                     </table>
                  </td>
               </tr>
               <tr>
                  <td>&nbsp;</td>
               </tr>
               <tr>
                  <td></td>
               </tr>
            </tbody>
            </TD>
            </TR>
            <tr>
               <TD>&nbsp;</TD>
            </tr>
            <TR>
               <TD></TD>
            </TR>
         </TABLE>
         <INPUT TYPE="hidden" name="LOAD_ID" value="" />    
         <INPUT TYPE="hidden" name="uiStatus" value="" />      
      </FORM>
   </BODY>
</HTML>

I know basics jquery , but i could not able to think logic and implement for this ,anyone who are expert please help me.

$( document ).ready(function() {
  //i can do for single columns it works, but confused what to i have multiple columns
  var seen = {};
$('table tr').each(function() {
    var txt = $(this).text();
    if (seen[txt])
        $(this).remove();
    else
        seen[txt] = true;
});
});

@SamTengWong If the STATUS column values is not PARTIAL and CA column values are not of the same name. Need to put unique row based on CA & STATUS column whereas only for PARTIAL status. — Dan
– Dan, Commented Apr 7, 2016 at 5:58
no, in your example there are three of them right? how will I choose which one will remain? — Sam Teng Wong
– Sam Teng Wong, Commented Apr 7, 2016 at 5:59
@SantoshRamKunjir thanks but you can see LD column it is unique, group by wont work, I already tried to solve from query, at last thought to handle this from UI — Dan
– Dan, Commented Apr 7, 2016 at 6:01

Devanshu Saini · Accepted Answer · 2016-04-07 09:24:35Z

2

Please add a class for little selector simplification say "mytable"

You can use following javascript for your solution:

var seen = [];

function pushDataInSeen(ca, status) {
    var alreadyThere = false;
    var i = 0
    for (i = 0; i < seen.length; i++) {
        var theObj = seen[i];
        if ((theObj.ca == ca) && (theObj.status == status) && (status == 'partial')) {
            alreadyThere = true;
            break;
        }
    }
    if (!alreadyThere) {
        seen.push({
            "ca": ca,
            "status": status
        });
    }
    return !alreadyThere;
}

$(document).ready(function() {
    var removal = [];
    $('table.mytable tr').each(function(index) {
        if (index) {
            /* skip the first one for header as per the html structure */
            var ca = $("td:nth-child(1)", $(this)).text().trim().toLowerCase();
            var status = $("td:nth-child(6) input", $(this)).val().toLowerCase();
            if (!pushDataInSeen(ca, status)) {
                removal.push(index + 1);
            }
        }
    });

    removal.reverse();
    for (var i = 0; i < removal.length; i++) {
        $('table.mytable tr:nth-child(' + removal[i] + ')').remove();
    }

});

edited Apr 7, 2016 at 9:24

answered Apr 7, 2016 at 7:20

Devanshu Saini

7755 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dan Over a year ago

Thank you. But your output is not as expected output. If you read the description above , i have asked to only apply this logic for PARTIAL status column. Expected output: i.sstatic.net/mTnu5.png

Devanshu Saini Over a year ago

@Ashu I skipped partial keyword thing earlier, please use above code, now it will work.

Dan Over a year ago

Update, i missed to ask: The COUNT columns values should be sum up at the same time and displayed when extra duplicate rows removed. Eg.i.sstatic.net/KfQW2.png

Squivo · Accepted Answer · 2016-04-07 06:04:13Z

0

Inside your .each loop, add:

var tdElements = $(this).find('td').get();

This will get an array of all the td elements in order of appearance, then you can loop through and extract the text of the td elements you want.

answered Apr 7, 2016 at 6:04

Squivo

9271 gold badge10 silver badges21 bronze badges

Collectives™ on Stack Overflow

Jquery: How to remove duplicate HTML TABLE rows based on columns values

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related