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

Posted 2023-02-16

【中文标题】使用 jQuery 比较和突出显示表格数据

【英文标题】：Comparing and highlighting table data with jQuery

【发布时间】：2012-04-09 22:00:39

【问题描述】：

我有以下结构的表

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

Here is the link of the code

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

【问题讨论】：

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

【参考方案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