比較和使用jQuery

Question

突出表數據我有表結構如下

每當上支票簿的用戶點擊和點擊鏈接「比較差異」表列如果值是不同的應該突出。用戶可以選擇兩個，一旦用戶選擇兩個（或三個以上）其他行將隱藏，只顯示比較行。

Here is the link of the code

編輯： 我如何添加類COLGROUP>山坳如有該列中的值是不同勢？ 或 如何添加所選行的class/highlight div與td相比？

Answer 1

jQuery(document).ready(function() { 

       $("#compareme").click(function() { 
//get all checkboxes that are not selected 
        var not_selected = $("input:not(:checked)"); 
//get all checkboxes that are selected 
        var selected = $("input:checked"); 
        if($(selected).length < 2) { 
//you need more than 1 for comparison 
         alert("please select more than 1 product") 
        } else { 
//hide the not selected ones 
         $(not_selected).closest("tr").hide(); 
        } 
//loop through your columns 
        for(var i = 1; i < 5; i++) { 
         var prev = null; 
         $.each($(selected), function() { 

          var curr = $(this).closest("tr").find("td").eq(i).text(); 
//if at least one value is different highlight the column 
          if(curr !== prev && prev !== null) { 
           $("col").eq(i).addClass("highlight"); 
          } 
          prev = curr; 

         }) 
        } 

       }) 
      }); 

Answer 2

我不會爲您編寫代碼，但下面是我如何處理這個問題的粗略概述。

1. 將函數綁定到鏈接的點擊事件。 （當比較鏈接被點擊時，它會觸發該功能）。

然後，該函數：

1. （通過所有的行可能環，看看它，看看他們是否有一個未選中的複選框，並刪除它們）刪除所有未選中的行。

2. 從剩餘的行中取出第一個選中的行，並遍歷它的單元格。對於每個單元格，您將它的值與下一行的值進行比較。粗略未經測試的腳本：

   var c = 1; //start from column 1, because 0 is the Product Name 
   $('table tr')[0].each(this.children('td'), function(){ 
       if(this.val() == $('table td')[1].children('td')[c].val() { 
        //apply a style to the current cell here 
       } 
       c = c + 1; 
   }); 
   

希望這有助於你對你的方式有點？請注意，我把這個寫在了我頭上，只是爲了說明我處理這件事的方式。不要複製粘貼它，可能是：P

Answer 3

最簡單的方法就是將你的複選框的值作爲行的ID。您可以使用PHP或HTML輕鬆完成此操作。因此，舉例來說，如果你有一個值的複選框，確保其兄弟表格單元格的值是它的ID：

<tr> 
    <td> 
     <input type="checkbox" name="name" class="click_me" value="2"> 
    </td> 
    <td id="2"> 
     2 
    </td> 
    <td id="5"> 
     5 
    </td> 
</tr> 

當你點擊複選框，收集值的數組：

$('.click_me').click(function(){ 
    var thisArray = new Array(); 
    $(this).parent('td').siblings('td').each(function(){ 
     thisArray[] = $(this).attr('id'); 
    }); 
}); 

我們現在有一個數組，填充此行的所有值。現在我們需要找到的所有其他行的價值觀：

var otherArray = new Array(); 
$('.click_me:selected').not(this).each(function(){ 
    otherArray[] = $(this).parent().siblings('td').each(function(){ 
     otherArray[] = $(this).attr('id'); 
    }); 
}); 

現在我們有兩個數組：一個與你剛纔所選擇的列的值，另將所有其他現有的被選擇。現在我們需要比較它們。如果有任何值在兩個陣列相匹配，我們可以不喜歡加個班：

for (var i = 0; thisArray[i]; i++) { 
    if (jQuery.inArray(thisArray[i],otherArray)) { 
     $(this).parent('tr').addClass('selected'); 
    } 
} 

如果存在無論是在thisArray和otherArray，將增加對你點擊輸入父類中的價值。您可以使用CSS來更改此表格行的樣式，或者甚至可以更改該行中的選定表格單元格。