Javascript 使用jquery将所有表行替换为来自服务器的新数据
我每隔3分钟通过套接字从服务器获取数据。 我遍历数据，然后使用id=“display”将其装载到tbody下 挑战在于，新数据将附加到DOM中，而不是替换所有旧数据。 我尝试了所有方法，如$（'#display'）.empty（）.html（）和.replaceWith（），但仍然 数据被追加Javascript 使用jquery将所有表行替换为来自服务器的新数据,javascript,html,jquery,socket.io,Javascript,Html,Jquery,Socket.io,我每隔3分钟通过套接字从服务器获取数据。 我遍历数据，然后使用id=“display”将其装载到tbody下 挑战在于，新数据将附加到DOM中，而不是替换所有旧数据。 我尝试了所有方法，如$（'#display'）.empty（）.html（）和.replaceWith（），但仍然 数据被追加 <html> <head> <title>Servers</title> <link rel="stylesheet&qu
<html>
<head>
<title>Servers</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<header>
<h3>Online Servers</h3>
</header>
<section id="work">
<table class="table" id="sector">
<thead>
<th>
Location
</th>
<th>
IP
</th>
<th
State
</th>
</thead>
<tbody id="display">
</tbody>
</table>
</section>
</body>
<script src="/socket.io/socket.io.js"></script>
<script src="sectors.json"></script>
<script src="js/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<script>
var socket = io();
var tab = '';
var history = [];
socket.on('update', data => {
// $.each($('.remote'), function (index, value) {
// $(this).remove();
// });
data.map((item, index) => {
//tab += "<p class = 'remote'>" + index + "</p>";
tab += "<tr><td>" + item.location + "</td><td>" + item.host + "</td><td><div><p>" + item.alive.toString() + "</p><p>" + item.packetLoss + "</p></div></td></tr>"
})
$('#display').html(tab);
})
socket.on('network', () => {
console.log("network down")
})
</script>
</html>
服务器
在线服务器
位置
知识产权
{
//$.each（$（'.remote'），函数（索引，值）{
//$（this.remove（）；
// });
data.map（（项目、索引）=>{
//tab+=“”+index+“
”；
选项卡+=“”+item.location+“”+item.host+”“+item.alive.toString（）+”“+item.packetLoss+””
})
$（'#display'）.html（制表符）；
})
socket.on（'network'，（）=>{
控制台日志（“网络关闭”）
})
<html>
<head>
<title>Servers</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<header>
<h3>Online Servers</h3>
</header>
<section id="work">
<table class="table" id="sector">
<thead>
<th>
Location
</th>
<th>
IP
</th>
<th
State
</th>
</thead>
<tbody id="display">
</tbody>
</table>
</section>
</body>
<script src="/socket.io/socket.io.js"></script>
<script src="sectors.json"></script>
<script src="js/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<script>
var socket = io();
var tab = '';
var history = [];
socket.on('update', data => {
// $.each($('.remote'), function (index, value) {
// $(this).remove();
// });
data.map((item, index) => {
//tab += "<p class = 'remote'>" + index + "</p>";
tab += "<tr><td>" + item.location + "</td><td>" + item.host + "</td><td><div><p>" + item.alive.toString() + "</p><p>" + item.packetLoss + "</p></div></td></tr>"
})
$('#display').html(tab);
})
socket.on('network', () => {
console.log("network down")
})
</script>
</html>
服务器
在线服务器
位置
知识产权
{
//$.each（$（'.remote'），函数（索引，值）{
//$（this.remove（）；
// });
data.map（（项目、索引）=>{
//tab+=“”+index+“
”；
选项卡+=“”+item.location+“”+item.host+”“+item.alive.toString（）+”“+item.packetLoss+””
})
$（'#display'）.html（制表符）；
})
socket.on（'network'，（）=>{
控制台日志（“网络关闭”）
})
$（“#display”）.empty（）$（“#display”）.html（“”）