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

【问题标题】：Comparing and highlighting table data with jQuery使用 jQuery 比较和突出显示表格数据
【发布时间】：2012-04-09 22:00:39
【问题描述】：

我有以下结构的表

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

Here is the link of the code

编辑：如果该列中的任何值不同，我如何将类添加到 colgroup > col？要么如何添加所选行的类/高亮 div 比较 td？

【问题讨论】：

如果您选择 2 个以上的产品，那么什么构成不同的值？我们是否在检查它们是否都相同以及是否没有突出显示列？

标签： javascript jquery html

【解决方案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;

                        })
                    }

                })
            });

【讨论】：

不错的答案！我为您的解决方案准备了一个小提琴 - jsfiddle.net/4KfeU - 并冒昧地改进。当长度小于两个时，我添加了$("tr").show(); 和$("col").removeClass("highlight");，并且列突出显示循环进入了 else 子句。随意重复使用小提琴。

【解决方案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 更改此表格行的样式，甚至可以更改该行中的选定表格单元格。

【讨论】：

使用数字作为 id 是个坏主意，因为 id 不允许以数字开头。

【解决方案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

【讨论】：