点击Ajax表格编辑按钮时高亮选中行问题求助

报错原因 #

你遇到的语法错误，核心问题有两个：

1. AJAX回调中this的上下文丢失：在$.ajax的success回调函数里，this不再指向你点击的编辑按钮，而是指向AJAX请求对象，所以$(this).closest('tr')无法找到目标行，导致selectedRow为空字符串，最终生成tr:nth-child()这种不符合CSS选择器语法的表达式，触发报错。
2. 行索引计算错误：就算this上下文正确，你的表格第一行是表头（<tr>标签），数据行的nth-child索引应该是count + 1（表头是第1个tr，第一个数据行是第2个），但你直接用了td里的count值，会导致选中错误的行。

修复方案 #

不需要通过td的文本值去定位行，直接在点击事件中保存目标行的引用，在AJAX成功后给该行添加类即可，代码修改如下：

修改后的点击事件代码 #

$(document).on('click', '.edit', function(){
    var eID = $(this).attr("id");
    // 保存当前按钮所在的行，避免AJAX回调中this上下文丢失
    var $targetRow = $(this).closest('tr');
    $('#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();

            // 直接给目标行添加highlight类，无需通过nth-child定位
            $targetRow.addClass('highlight');

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

额外优化建议 #

• 可以先移除其他行的highlight类，避免同时高亮多个行，比如在添加类之前加上：$('#copyTable tr').removeClass('highlight');
• 你的表格中编辑和删除按钮使用了相同的id值（data[i].id），这不符合HTML规范（id必须唯一），建议改为用data-id属性存储ID，比如：<button type="button" class="edit" title="Edit" data-id='+data[i].id+'>，获取时用var eID = $(this).data("id");，避免id冲突。

内容的提问来源于stack exchange，提问作者Mark