使用 jquery 从表中删除 tr

Posted 2023-05-08

技术标签:

【中文标题】使用 jquery 从表中删除 tr【英文标题】：remove tr from table using jquery 【发布时间】：2021-11-06 21:51:06 【问题描述】：

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

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

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

Blow 是我的代码，还附上了截图。

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

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);
                
            );

【问题讨论】：

【参考方案1】：

我认为您需要在追加之前清除 $('#appointmentdetailstable') div。目前，您只需将 html 添加到 div 的末尾即可。

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

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

在这里也可以快速解决：https://jsfiddle.net/d2svbm9o/20/

【讨论】：

【参考方案2】：

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

这解决了我的问题。

非常感谢大家帮助我。

【讨论】：