81 lines
1.9 KiB
HTML
81 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>页面二</title>
|
|
<style>
|
|
table{
|
|
border: 1px solid;
|
|
border-collapse: collapse;
|
|
}
|
|
table td{
|
|
border: 1px solid;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>学生表</h1>
|
|
<table id="tab">
|
|
<!-- <tr>
|
|
<td>学号</td>
|
|
<td>姓名</td>
|
|
<td>年龄</td>
|
|
</tr>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>謝傑</td>
|
|
<td>18</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td>张三</td>
|
|
<td>19</td>
|
|
</tr> -->
|
|
</table>
|
|
<script src="./db.js"></script>
|
|
<script>
|
|
|
|
function render(arr){
|
|
let tab = document.querySelector("#tab");
|
|
tab.innerHTML = `
|
|
<tr>
|
|
<td>学号</td>
|
|
<td>姓名</td>
|
|
<td>年龄</td>
|
|
</tr>
|
|
`;
|
|
let str = arr.map(item=>{
|
|
return `
|
|
<tr>
|
|
<td>${item.stuId}</td>
|
|
<td>${item.stuName}</td>
|
|
<td>${item.stuAge}</td>
|
|
</tr>
|
|
`
|
|
}).join("");
|
|
tab.innerHTML += str;
|
|
}
|
|
|
|
async function renderTable(){
|
|
let db = await openDB("stuDB",1);
|
|
let stuInfo = await getDataByKey(db, "stu");
|
|
render(stuInfo);
|
|
|
|
setInterval(async function(){
|
|
let stuInfo2 = await getDataByKey(db, "stu");
|
|
if(stuInfo2.length !== stuInfo.length){
|
|
stuInfo = stuInfo2;
|
|
render(stuInfo);
|
|
}
|
|
}, 1000);
|
|
}
|
|
renderTable()
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|