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

Question

我有以下结构的表

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

Here is the link of the code

编辑: 如果该列中的任何值不同，我如何将类添加到 colgroup > col？ 或者 与 td 相比，如何添加所选行的类/突出显示 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;

                        })
                    }

                })
            });