使用 jquery 从 table 中删除 tr

Question

我有一个日历，当用户单击任何日期时，它会在右侧显示约会列表。

它工作正常，但问题是当用户单击任何其他日期时，仍然会显示以前日期的约会..

所以我需要的是当用户点击任何新日期时，之前日期的约会应该隐藏并仅显示点击日期的约会。

下面是我的代码，并附上截图。

当用户点击任何日期时，此函数正在调用...

function getEvents(date) {

            events.forEach(function (entry) {
                if (entry['start'] == date.format()) {

                    $("#appointmenttable").css({ "display": "block" });

                    if (entry['appointmentstatus'] == 'Pending') {
                        $("#twobuttons").css({ "display": "block" });
                        $("#onebutton").css({ "display": "none" });
                    } else if (entry['appointmentstatus'] == 'Approved') {
                        $("#onebutton").css({ "display": "block" });
                        $("#twobuttons").css({ "display": "none" });
                    } else {
                        $("#twobuttons").css({ "display": "none" });
                        $("#onebutton").css({ "display": "none" });
                    }

                    var row = $('<tr id="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 id="twobuttons" style="display:none;"> <div> <button type="button" id="confirmbutton" class="css_button_new">Confirm</button> </div>' +
                        '<div> <button type="button" id="rejectbutton" class="css_button_new" style="margin-top: 7px;">Reject</button> </div> </td>' +
                        '<td id="onebutton" style="display:none;"> <div> <button type="button" id="cancelbutton" class="css_button_new">Cancel</button> </div> </td>' +
                        '</tr> ');

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

Answer 1

我认为您需要在追加之前清除 $('#appointmentdetailstable') div。目前，您只需在 div.

的末尾添加 HTML

在代码块的开头尝试运行 $('#appointmentdetailstable').empty();，这样它就不会包含上次触发事件的行数据。

文档：https://api.jquery.com/empty/ + https://api.jquery.com/append/

这里也快fiddle：https://jsfiddle.net/d2svbm9o/20/

Answer 2

$('#appointmentdetailstable').empty();

这解决了我的问题。

非常感谢大家对我的帮助。

使用 jquery 从 table 中删除 tr

remove tr from table using jquery

asp.net

asp.net-mvc

jquery

fullcalendar-3