javascript - 突出显示 html 表格指定列上的值

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(":检查")

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