Jquery: Wie doppelte HTML TABLE-Zeilen basierend auf Spaltenwerten entfernt werden

Mit J-Abfrage, wie kann ich doppelte Zeilen entfernen, deren zwei Spalten Werte wiederholt werden, z. Ich habe 2 Spalten, d. H. CA und STATUS, ich möchte die eindeutige Zeile als sichtbar betrachten, wenn der STATUS-Spaltenwert 'PARTIAL' ist und die CA-Spalten doppelt vorhanden sind.Jquery: Wie doppelte HTML TABLE-Zeilen basierend auf Spaltenwerten entfernt werden

Aktuelle Bildschirm: Erwartete Ausgabe Bildschirm:

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>

Ich kenne Grundlagen jquery, aber ich konnte nicht logisch denken und implementieren dafür, jeder, der Experte ist, bitte helfen Sie mir.

$(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; 
}); 
});

Quelle

2016-04-07 Ashutosh Singh

wie werden Sie wählen, welche Zeile wird bleiben? –

@SamTengWong Wenn die STATUS-Spaltenwerte nicht PARTIAL sind und CA-Spaltenwerte nicht den gleichen Namen haben. Sie müssen eine eindeutige Zeile basierend auf der Spalte "CA & STATUS" einfügen, jedoch nur für den Status "PARTIAL". –

ca Spalte Gruppe von auf der Serverseite .. –

Bitte fügen Sie eine Klasse für wenig Wähler Vereinfachung sagen „mytable“

Sie können für Ihre Lösung folgende Javascript verwenden:

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(); 
    } 

});

Quelle

2016-04-07 07:20:44

Danke. Aber Ihre Ausgabe ist nicht wie erwartet. Wenn Sie die obige Beschreibung gelesen haben, habe ich gebeten, diese Logik nur für die PARTIAL-Statusspalte anzuwenden. Erwartete Ausgabe: http://i.stack.imgur.com/mTnu5.png –

@Ashu Ich überspringe teilweise Keyword-Sache früher, bitte verwenden Sie obigen Code, jetzt wird es funktionieren. –

Update, ich habe es versäumt zu fragen: Die COUNT columns Werte sollten zur gleichen Zeit addiert und angezeigt werden, wenn zusätzliche doppelte Zeilen entfernt wurden. Eg.http: //i.stack.imgur.com/KfQW2.png –

In Ihrem .each Schleife hinzu:

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

Dies wird ein Array aller td-Elemente in der Reihenfolge des Erscheinens bekommen, dann können Sie eine Schleife durch und den Text der td-Elemente extrahieren Sie wollen.

Quelle

2016-04-07 06:04:13 Squivo

Jquery: Wie doppelte HTML TABLE-Zeilen basierend auf Spaltenwerten entfernt werden

Antwort

Verwandte Themen