Question

我有以下结构的表格 enter image description here

每当用户点击支票簿并点击链接“比较差异”表格列时，应突出显示该值是否不同。用户可以选择两个，一旦用户选择三个中的两个（或三个以上），其他行将隐藏，仅显示比较行。

编辑：如何将类添加到colgroup＆gt; col，如果该列中的任何值是不同的？要么与td相比，如何添加所选行的class / highlight div？

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

执行此类操作的最简单方法是将复选框的值包含为行的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更改此表行的样式，甚至可以更改该行中的选择表单元格。

Answer 3

我不会为你编写代码，但这里是我如何处理这个问题的大致概述。

将功能绑定到链接的点击事件。（单击比较链接时，将触发该功能）。

然后，该函数执行：

删除所有未经检查的行（可能遍历所有行，查看它是否有未选中的复选框，然后删除它们）。

从剩余的行中取出第一个选中的行，然后遍历它的单元格。对于每个单元格，您将其值与下一行的值进行比较。一个粗略的未经测试的脚本：

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

使用jQuery比较和突出显示表数据

3 个答案: