新增arp列表页面

This commit is contained in:
zifan 2023-09-20 20:52:46 +08:00
parent 2c3bfe4b2e
commit 7e2e84c63b
2 changed files with 74 additions and 0 deletions

46
www/arp.html Executable file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="zifan">
<meta name="keywords" content="物联网">
<title>ARP列表</title>
</head>
<body>
<table id="arpTable" width="700" align="center" border="1">
<thead>
<th>ID</th>
<th>ip地址</th>
<th>mac地址</th>
</thead>
<tbody id="arpTableBody" align="center">
</tbody>
</table>
<script>
window.onload = function () {
fetch("/cgi-bin/ip.cgi").then(resp => resp.json()).then(data => {
if (data.code == 0) {
arpTableBody.innerText = "";
data.data.forEach(rowData => {
let tr = document.createElement("tr");
let td1 = document.createElement("td");
let td2 = document.createElement("td");
let td3 = document.createElement("td");
td1.innerText = rowData.id;
td2.innerText = rowData.ip;
td3.innerText = rowData.mac;
tr.append(td1, td2, td3);
arpTableBody.append(tr);
});
}
})
}
</script>
</body>
</html>

View File

@ -67,6 +67,32 @@
outline: none;
border: none;
}
#menu,
.menu_item {
list-style: none;
margin: 0;
}
.menu_item {
margin: 10px;
}
#menu>a {
display: block;
text-decoration: none;
color: black;
padding: 10px 20px;
width: 80%;
}
#menu>a:hover {
color: blue;
background-color: aquamarine;
border-radius: 5px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
}
</style>
</head>
@ -83,6 +109,8 @@
<div id="main">
<div id="menu">
<h3>路由配置</h3>
<a href="arp.html" target="content_frame" class="menu_item">ARP列表</a>
<a href="fw.html" target="content_frame" class="menu_item">黑名单</a>
</div>
<div id="content" style="width: 100%;">
<iframe name="content_frame" width="100%" height="100%"></iframe>