比较和使用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来更改此表格行的样式，或者甚至可以更改该行中的选定表格单元格。