Jquery：列の値に基づいて重複するHTML TABLE行を削除する方法

J-queryを使用して、2つの列の値が繰り返される重複する行を削除するにはどうすればいいですか？私は2列、すなわちCAとSTATUSを持っています。STATUS列の値が「PARTIAL」で、CA列が重複している場合、一意の行が表示されていると見なしたいと考えています。Jquery：列の値に基づいて重複するHTML TABLE行を削除する方法

現在の画面： 予想される出力画面：

CODE FIDDLE

htmlコード

<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>

私は基本的なjqueryを知っていますが、私は論理を考えてこれを実装することができず、熟練している人は誰でも助けてください。その後、あなたはループを通過することができ、

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

これは外観のために、すべてのtd要素の配列を取得し、TD要素のテキストを抽出：あなたの.eachループ内

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

出典

2016-04-07 Ashutosh Singh

どのようにあなたはどの行が残る選ぶのだろうか？ –

@SamTengWong STATUS列の値がPARTIALでなく、CA列の値が同じ名前でない場合。 CA＆STATUS列に基づいて一意の行を配置する必要があるのは、PARTIAL状態の場合のみです。 –

サーバ側の列グループby –

少しセレクタの簡略化のためにクラスを追加してくださいと言う「mytableは」

あなたはあなたのソリューションのためのjavascript使用することができます以下

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

});

出典

2016-04-07 07:20:44

ありがとうございます。しかし、あなたの出力は期待どおりの出力ではありません。上記の説明を読んだ場合、私はこの論理をPARTIALステータス列にのみ適用するように求めました。期待される出力：http://i.stack.imgur.com/mTnu5.png –

@Ashu部分的なキーワードを先にスキップしました。上記のコードを使用してください。これで動作します。 –

更新、私は尋ねていませんでした：COUNT列の値は、同時に合計して、追加の重複する行が削除されたときに表示される必要があります。 Eg.http：//i.stack.imgur.com/KfQW2.png –

、追加あなたは欲しい。

出典

2016-04-07 06:04:13 Squivo

Jquery：列の値に基づいて重複するHTML TABLE行を削除する方法

答えて

関連する問題