如何通过jQuery Ajax传递ID实现删除操作？获取不到ID的解决方案

你的核心问题是：传递给deleteVenue函数的<a>元素本身没有设置id属性，真正的venueId存放在当前行的隐藏<td>中，所以拿不到正确的值。以下是两种可行的解决方法：

方法一：通过自定义属性绑定ID #

修改生成删除按钮的代码，把venueId绑定到<a>标签的data-id自定义属性上：

tableData += '  <td><a class="no-line" onclick="deleteVenue(this);" data-id="' + data[i].venueId + '">&nbsp;<span class="glyphicon glyphicon-remove" style="color: red" ></span></a></td>';

然后修改deleteVenue函数，读取这个自定义属性的值：

function deleteVenue(obj) {
    // 原生JS方式获取
    var setValue = obj.getAttribute('data-id');
    // 或者用jQuery方式：var setValue = $(obj).data('id');
    
    $.ajax({
        type : "GET",
        async : false,
        url : "deleteVenue",
        data : {
            venueId : setValue
        },
        success : function(data) {
            console.log(data);
            // 优化：不用刷新页面，直接删除当前行
            $(obj).closest('tr').remove();
            // window.location.reload();
        }
    });
}

方法二：通过DOM遍历获取隐藏列的ID #

不需要修改生成按钮的代码，直接在deleteVenue函数中，通过当前点击的元素向上找到所属的<tr>，再查找隐藏的<td>获取ID：

function deleteVenue(obj) {
    // 找到当前行的隐藏td，获取文本内容并去除空白
    var setValue = $(obj).closest('tr').find('td:hidden').text().trim();
    
    $.ajax({
        type : "GET",
        async : false,
        url : "deleteVenue",
        data : {
            venueId : setValue
        },
        success : function(data) {
            console.log(data);
            // 直接删除当前行，无需刷新页面
            $(obj).closest('tr').remove();
        }
    });
}

额外提示 #

你生成编辑按钮的代码中，所有<i>标签的id都是Edit，这会导致页面中出现多个相同ID的元素，违反HTML规范，建议改成用class绑定事件，或者给每个编辑按钮设置唯一ID（比如Edit_${data[i].venueId}）。

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