Javascript 如何使用jquery在15秒后以html自动显示卡中的每个td数据
我在表中动态显示表中的数据，我grt json数据并在html表中动态显示。该表中有一张html卡，因此我想在15秒后显示该卡中的每个tr数据，即加载时第一个tr数据显示在卡中，15秒后第二个tr数据显示在同一张卡中，第一个tr数据删除。我想每隔15秒显示卡中的每个tr数据 我的代码Javascript 如何使用jquery在15秒后以html自动显示卡中的每个td数据,javascript,jquery,json,dynamic,html-table,Javascript,Jquery,Json,Dynamic,Html Table,我在表中动态显示表中的数据，我grt json数据并在html表中动态显示。该表中有一张html卡，因此我想在15秒后显示该卡中的每个tr数据，即加载时第一个tr数据显示在卡中，15秒后第二个tr数据显示在同一张卡中，第一个tr数据删除。我想每隔15秒显示卡中的每个tr数据 我的代码 <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, ini
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head></head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css" media="all">
body {
text-align: center;
box-sizing: border-box;
}
.card {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
width: 200px;
padding: 10px;
margin: 10px;
}
.tr {
background: blue;
color: white;
transition: background .3s;
}
.table {
border-collapse: collapse;
border: 1px solid #ddd;
}
.table td {
padding: 10px 15px;
}
</style>
</head>
<body>
<div class="card">
<span id="value">25 </span><span id="unit">ppm</span>
<p id="parameter">Sodium Oxide</p>
</div>
<div class="table-responsive">
<table class="table" border="1">
<thead>
<tr>
<th scope="col">Parameter</th>
<th scope="col">Alias</th>
<th scope="col">Cordinates</th>
<th scope="col">Location</th>
</tr>
</thead>
<tbody id="scroll">
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$.getJSON('./data.json', function(data) {
console.log(data)
var tdata = '';
$.each(data, function(key, value) {
console.log(value.deviceId)
tdata += '<tr>' + '<td>' + value.deviceId + '</td>' + '<td>' + value.aliasname + '</td>' + '<td>' + value.cordinates + '</td>' + '<td>' + value.location + '</td>' + '</tr>'
})
})
})
</script>
</body>
</html>
身体{
文本对齐：居中；
框大小：边框框；
}
.卡片{
长方体阴影：0.3pxRGBA（0,0,0,0.5）；
宽度：200px；
填充：10px；
利润率：10px；
}
.tr{
背景：蓝色；
颜色：白色；
过渡：背景。3s；
}
.桌子{
边界塌陷：塌陷；
边框：1px实心#ddd；
}
.表td{
填充：10px 15px；
}
25 ppm
氧化钠
参数
别名
科迪酸盐
位置
$（文档）.ready（函数（）{
$.getJSON（'./data.json'，函数（数据）{
console.log（数据）
var-tdata=''；
$。每个（数据、函数（键、值）{
console.log（value.deviceId）
tdata+=''+''+值.deviceId+''+''+值.aliasname+''+''+值.cordinates+''+''+值.location+'+''
})
})
})
asyncawaitconstbody=$（'#scroll'）；
const sleep=（毫秒）=>新承诺（resolve=>setTimeout（resolve，毫秒））；
$.getJSON（'./data.json'，异步函数（数据）{
控制台日志（数据）；
//永久循环接收到的值
而(1){
//对于数据中的每个值，替换表数据
//使用包含数据值的新tr
for（数据的常量值）{
console.log（value.deviceId）；
html（`${value.deviceId}${value.aliasname}${value.cordinates}${value.location}`）；
等待睡眠（15000）；
}
}
});
getJSON