Question

我在HTML表格上的突出显示值有问题。我只需要突出显示分配的列上的值，而不需要突出显示整个表。任何帮助表示赞赏！谢谢。 https://jsfiddle.net/raphcLb0/

这是我使用的JS代码：

$(document).ready(function() {

    $('.selector').each(function() {
        $(this).on('click', check); 
    });

    $('.all').each(function() {
        $(this).on('click', all); 
    });

    function all(event) {
        if($(this).is(':checked')){  
            $("input:checkbox:not(:checked)",$(this).parents('form')).not(this).prop("checked","checked");
        } else {
            $("input:checkbox(:checked)",$(this).parents('form')).not(this).prop("checked","");
        }

        //$('.selector').prop("checked", this.name === "SelectAll");
        check(event);
    }

    function check(event) {
        var checked = $(".selector:checked").map(function () {
            return this.name
        }).get()
        $('td').removeClass("highlight").filter(function () {
            return $.inArray($(this).text(), checked) >= 0
        }).addClass("highlight")
        if ($(this).is(".selector"))
            $('.all').not(this).prop("checked", false)
    }

    $( "#Hidden").on( "click", function() {
         $(".selector").toggle();
    });

});

Answer 1

以下方法应该起作用：

// JavaScript Document
$(document).ready(function() {

$('.selector').each(function() {
    $(this).on('click', check); 
});
    $('.all').each(function() {
       $(this).on('click', all); 
    });

function all(event) {

        if($(this).is(':checked')){  $("input:checkbox:not(:checked)",$(this).parents('form')).not(this).prop("checked","checked");
    } else {
        $("input:checkbox(:checked)",$(this).parents('form')).not(this).prop("checked","");
    }

    //$('.selector').prop("checked", this.name === "SelectAll");

    check(event);
}

function check(event) {
    var checked = $(".selector:checked").map(function () {
        return this.name
    }).get()
    $('td').removeClass("highlight").filter(function () {
        return $.inArray($(this).text(), checked) >= 0 &&
              $('#form' + ($(this).index() + 1)).find('[name="'+$(this).text()+'"]').is(":checked")
    }).addClass("highlight")
    if ($(this).is(".selector"))
        $('.all').not(this).prop("checked", false)

}


 $( "#Hidden").on( "click", function() {
        $(".selector").toggle();
    });



});

Example

我所做的是纠正表单ID并添加以下行：

$('#form' + ($(this).index() + 1)).find('[name="'+$(this).text()+'"]').is(":checked")

这是选择具有包含当前td元素相对于其tr父级的索引的id的形式。然后，它会找到具有正确名称值的复选框，该复选框与该表单中的td的文本内容相匹配，并检查是否已选中。

在html表的指定列上突出显示值

1 个答案: