单击ajax表中的按钮时突出显示行

Question

我想在单击编辑按钮时在 ajax 表中的选定行上添加突出显示类。我不知道为什么我的代码不起作用。你可以帮帮我吗？预先感谢。

function getData(){
            $.ajax({
                url:"<?php echo base_url(); ?>copycontrol/getData",
                method:"post",
                dataType: "json",
                success:function(data){
                    var html='';
                    var i;
                    var count= 1;
                    html+='<table id="copyTable" class="table table-bordered"><tr><th class="border_none"style="width:2%"></th><th  class="border_none" style="width:86%">Procedure Description</th><th class="text-center" style="width:12%">Operations</th></tr>';
                    for(i in data){
                        html+='<tr><td>'+count+'</td><td onclick="copy(this)">'+data[i].name+'</td><td><button type="button" class="delete" id='+data[i].id+'><i class="fa fa-trash" title="Delete" style="font-size:20px;"></i></button><button type="button" class="edit" title="Edit" id='+data[i].id+'><i class="fa fa-edit" style="font-size:20px;"></i></button></td></tr>';
                        count++;
                    }
                    html+='</table>';
                    $('#showData').html(html);
                }
            });
        }

$(document).on('click', '.edit', function(){
            var eID = $(this).attr("id");
            $('#copy_info').text("Edit row.");
            $.ajax({
                url:"<?php echo base_url(); ?>copycontrol/fetchSingleData",
                method:"post",
                data:{eID: eID},
                dataType:"json",
                success:function(data){
                    
                    var i;
                    for(i in data){
                        $('#name').val(data[i].name);
                    }
                    $('#single').val(eID);
                    $('#submit').text("Edit");
                    $('#submit').val("update");
                    $('#name').focus();

                    var selectedRow = $(this).closest('tr').find("td:eq(0)").text();
                    $("tr:nth-child(" + selectedRow + ") ").addClass('highlight');

                    if($('#submit').val() == "submit")
                    {
                        $('#success').text("Row data was successfuly edited.");
                        $('#success').fadeOut(3000);
                        
                    }
                }
            });
        });

此代码产生错误：“未捕获错误：语法错误，无法识别的表达式：:nth-child()...”

var selectedRow = $(this).closest('tr').find("td:eq(0)").text();
$("tr:nth-child(" + selectedRow + ") ").addClass('highlight');

Answer 1

您可以直接将类添加到单击的按钮最近的行，而不是获取行号，然后通过该行号查找行，因为单击的按钮会触发 AJAX 调用

this

AJAX 成功回调中的引用不引用对于编辑按钮，但对于成功函数本身，您需要在 AJAX 调用之外保留对按钮的引用。

$(document).on('click', '.edit', function() {
    var eID = $(this).attr("id");
    $('#copy_info').text("Edit row.");

    // Preserve 'this' context to use inside AJAX success callback
    var button = $(this); // 'this' refers to the clicked '.edit' button

    $.ajax({
        url: "<?php echo base_url(); ?>copycontrol/fetchSingleData",
        method: "post",
        data: {eID: eID},
        dataType: "json",
        success: function(data) {
            for (var i in data) {
                $('#name').val(data[i].name);
            }
            $('#single').val(eID);
            $('#submit').text("Edit");
            $('#submit').val("update");
            $('#name').focus();

            // Add 'highlight' class to the closest 'tr' from the button
            button.closest('tr').addClass('highlight');

            if ($('#submit').val() == "submit") {
                $('#success').text("Row data was successfully edited.");
                $('#success').fadeOut(3000);
            }
        }
    });
});