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

我有一张结构如下的桌子

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

编辑： 如果列中的任何值不同，如何将类添加到colgroup>col？ 或

---

如何添加所选行的class/highlight div？

我不打算为您编写代码，但下面是我将如何处理此问题的大致概述

将函数绑定到链接的单击事件。（单击“比较”链接时，将触发该函数）

然后，该函数执行以下操作：

删除所有未选中的行（可能在所有行中循环，查看是否有未选中的复选框，然后删除它们）

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

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（document）.ready（function（）{
    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;

                        })
                    }

                })
            });

$（“#比较”）。单击（函数（）{
//获取所有未选中的复选框
var not_selected=$（“输入：not（：checked）”）；
//获取所有选中的复选框
所选变量=$（“输入：选中”）；
如果（$（选定）。长度<2）{
//您需要多个1进行比较
警报（“请选择多个产品”）
}否则{
//隐藏未选中的项目
$（未选中）。最近的（“tr”）。隐藏（）；
}
//循环浏览你的专栏
对于（变量i=1；i<5；i++）{
var-prev=null；
$。每个（$（选定），函数（）{
var curr=$（this.recest（“tr”）.find（“td”）.eq（i）.text（）；
//如果至少有一个值不同，则突出显示该列
if（curr！==prev&&prev！==null）{
$（“col”）.eq（i）.addClass（“突出显示”）；
}
上一次=当前；
})
}
})
});

这样做的最简单方法是将复选框的值作为行的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>

我们现在有一个数组，其中填充了此行的所有值。现在我们需要找到所有其他行的值：

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');
   }
}

---

如果一个值同时存在于

thisrarray

和

otherArray

中，则您正在单击的输入的父级将添加一个类。您可以使用CSS更改此表格行的样式，甚至更改该行中的选定表格单元格的样式。

如果选择两个以上的产品，则构成不同值的是什么？我们是否检查它们是否都相同，是否不突出显示该列？回答不错！我为你的解决方案准备了一把小提琴，并冒昧地加以改进。我添加了

$（“tr”）.show（）和
$（“col”）。删除类（“突出显示”）for。可以随意重复使用小提琴。使用数字作为ID是个坏主意，因为ID不能以数字开头。
for (var i = 0; thisArray[i]; i++) {
   if (jQuery.inArray(thisArray[i],otherArray)) { 
      $(this).parent('tr').addClass('selected');
   }
}