使用jQuery删除表格tr行 解决点击日历日期旧预约仍显示问题

你当前的问题是点击新日期加载预约数据时，未清空上一次生成的表格行，直接追加新内容导致旧数据残留。只需在函数入口新增清空逻辑即可，同时你现有代码存在同页面重复ID的问题，同步修复可避免后续选择器逻辑异常。

核心修改点 #

• 函数进入时先清空#appointmentdetailstable内的所有原有子元素
• 将行内重复的id属性改为class，避免同一页面多个相同id导致的逻辑异常
• 调整按钮显示逻辑为针对当前新增行操作，而非全局选择元素

修改后完整代码 #

function getEvents(date) {
    // 第一步：先清空上次加载的所有表格内容
    $('#appointmentdetailstable').empty();
    // 先默认隐藏整个表格容器，匹配到预约再显示
    $("#appointmenttable").css({"display": "none"});

    events.forEach(function (entry) {
        if (entry['start'] == date.format()) {
            $("#appointmenttable").css({ "display": "block" });
            // 先声明行，按钮显示状态后续针对当前行操作
            var row = $('<tr class="mytablerow"> <td> <div> <img class="logo screen" src="images/placeholder.jpg" style="float:right; width:100px; height:100px;" /> </div> </td>' +
                '<td> <div>Patient Name : Test</div> <div>Date : <span>' + entry['start'] + '</span></div> <div>Time : <span>' + entry['startt'] + '</span></div>' +
                '<div>' + entry['title'] + '</div> <div>' + entry['appointmentstatus'] + '</div> </td>' +
                '<td class="twobuttons" style="display:none;"> <div> <button type="button" class="confirmbutton css_button_new">Confirm</button> </div>' +
                '<div> <button type="button" class="rejectbutton css_button_new" style="margin-top: 7px;">Reject</button> </div> </td>' +
                '<td class="onebutton" style="display:none;"> <div> <button type="button" class="cancelbutton css_button_new">Cancel</button> </div> </td>' +
                '</tr> ');

            // 针对当前行修改按钮显示状态
            if (entry['appointmentstatus'] == 'Pending') {
                row.find(".twobuttons").css({ "display": "block" });
                row.find(".onebutton").css({ "display": "none" });
            } else if (entry['appointmentstatus'] == 'Approved') {
                row.find(".onebutton").css({ "display": "block" });
                row.find(".twobuttons").css({ "display": "none" });
            } else {
                row.find(".twobuttons").css({ "display": "none" });
                row.find(".onebutton").css({ "display": "none" });
            }

            $('#appointmentdetailstable').append(row);
        }
    });
}

补充说明 #

如果你的#appointmentdetailstable内保留了固定的表头行，不想清空表头的话，可以把清空代码替换为：

$('#appointmentdetailstable tr').not(':first').remove();

该代码只会删除除第一行表头外的所有数据行。

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