标签：select each prototype ARMAR port int body tar cas
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
<style type="text/css">
.protocolAnalysis {
background: lightgray;
padding-top: 30px;
height: 900px;
}
.protocolAnalysis .display {
width: 1200px;
margin: 0 auto
}
.protocolAnalysis .display .table {
width: 1200px;
margin: 0 auto;
border-collapse:collapse;
}
.protocolAnalysis .display .table th {
padding: 0 20px;
text-align: center;
border: 1px solid grey;
height: 25px;
}
.protocolAnalysis .display .table td {
padding: 0 20px;
text-align: center;
border: 1px solid grey;
height: 25px;
}
.protocolAnalysis .display .table td span {
color: deepskyblue;
display: inline-block;
border: 1px solid deepskyblue;
padding: 2px 10px;
user-select: none;
cursor: pointer;
margin: 3px auto;
}
.protocolAnalysis .display .bottomFilter {
width: 1200px;
margin: 0 auto;
padding: 5px 0;
}
.protocolAnalysis .display .bottomFilter button {
display: inline-block;
width: 60px;
margin: 0 25px;
background: deepskyblue;
color: white;
height: 20px;
border-radius: 5px;
text-align: center;
line-height: 20px;
}
.protocolAnalysis .display .bottomFilter button.first {
margin-left: 0;
}
.protocolAnalysis .display .bottomFilter label {
display: inline-block;
width: 60px;
background: deepskyblue;
color: white;
height: 20px;
border-radius: 5px;
text-align: center;
line-height: 20px;
}
.protocolAnalysis .display .bottomFilter input {
display: inline-block;
width: 30px;
height: 20px;
text-align: center;
}
.protocolAnalysis .display .bottomFilter p {
display: inline-block
}
.protocolAnalysis .display .bottomFilter p span {
display: inline-block;
margin: 0 5px;
}
.protocolAnalysis .appearMark {
width: 100%;
height: 100%;
background: cadetblue;
z-index: 2;
position: absolute;
display: none;
top: 0;
opacity: 0.2;
}
.protocolAnalysis .appearMarkInner {
width: 1000px;
height: 555px;
background: white;
margin: auto;
position: absolute;
display: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 1;
z-index: 4;
}
.protocolAnalysis .appearMarkInner .detail {
height: 40px;
line-height: 40px;
padding-left: 20px;
background: darkblue;
color: white;
font-size: 14px;
}
.protocolAnalysis .appearMarkInner .detail span {
display: inline-block;
float: right;
margin-right: 20px;
cursor: pointer;
user-select: none
}
.protocolAnalysis .appearMarkInner .tableTopUl {
width: 950px;
margin: 20px auto;
overflow: auto;
}
.protocolAnalysis .appearMarkInner .tableTopUl .tableTopLi {
width: 475px;
margin: 0 auto;
float: left;
height: 25px;
line-height: 25px;
}
.protocolAnalysis .appearMarkInner .tableTopUl .tableTopLi span {
display: inline-block;
font-size: 15px;
}
.protocolAnalysis .appearMarkInner table {
width: 950px;
margin: 0 auto;
border: 1px solid gainsboro;
border-collapse:collapse;
}
.protocolAnalysis .appearMarkInner table tr {
width: 100%;
border: 1px solid darkgrey;
height: 30px;
line-height: 30px;
}
.protocolAnalysis .appearMarkInner table tr th {
width: 25%;
border: 1px solid darkgrey;
background: lightgray
}
.protocolAnalysis .appearMarkInner table tr td {
width: 25%;
text-align: center;
}
.protocolAnalysis .appearMarkInner {
background: gainsboro;
}
.protocolAnalysis .appearMarkInner ul{
list-style: none;
}
.protocolAnalysis .appearMarkInner .tablePopupBottom {
width: 950px;
margin: 0 auto;
padding: 5px 0;
}
.protocolAnalysis .appearMarkInner .tablePopupBottom button {
display: inline-block;
width: 60px;
margin: 0 25px;
background: deepskyblue;
color: white;
height: 20px;
border-radius: 5px;
text-align: center;
line-height: 20px;
}
.protocolAnalysis .appearMarkInner .tablePopupBottom button.first {
margin-left: 0;
}
.protocolAnalysis .appearMarkInner .tablePopupBottom label {
display: inline-block;
width: 60px;
background: deepskyblue;
color: white;
height: 20px;
border-radius: 5px;
text-align: center;
line-height: 20px;
}
.protocolAnalysis .appearMarkInner .tablePopupBottom input {
display: inline-block;
width: 30px;
height: 20px;
text-align: center;
}
.protocolAnalysis .appearMarkInner .tablePopupBottom p {
display: inline-block
}
.protocolAnalysis .appearMarkInner .tablePopupBottom p span {
display: inline-block;
margin: 0 5px;
}
</style>
</head>
<body>
<div class="protocolAnalysis">
<div class="display">
<table class="table" id="table">
<thead>
<tr>
<th><input type="checkbox" id="allChecked"/>全选</th>
<th>序号</th>
<th>起始时间</th>
<th>IP</th>
<th>MAC</th>
<th>端口</th>
<th>协议类型</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="bottomFilter" id="bottomFilter">
<button class="first" id="firstPage">首页</button>
<button id="prevPage">上一页</button>
<p>
<span>第</span>
<span id="nowPage"></span>
<span>页</span>
<span>/</span>
<span>共</span>
<span id="totalPage"></span>
<span>页</span>
</p>
<button id="nextPage">下一页</button>
<button id="lastPage">尾页</button>
<input type="text" id="leap"/>
<label for="leap">跳转</label>
</div>
</div>
<!--以下是遮罩-->
<div class="appearMark" id="appearMark"></div>
<div class="appearMarkInner" id="appearMarkInner">
<p class="detail">事件信息 <span id="clickDisappear">关闭</span></p>
<ul class="tableTopUl">
<li class="tableTopLi"><span>协议类型：</span><span id="protocolTypePopup">modbus</span></li>
<li class="tableTopLi"><span>起始时间：</span><span id="startTimePopup">2018-04-14</span></li>
<li class="tableTopLi"><span>端口：</span><span id="portPopup">50076<--->502</span></li>
<li class="tableTopLi"><span>IP地址：</span><span id="IPAddressPopup">192.168.1.6<--->192.168.1.222</span></li>
<li class="tableTopLi"><span>MAC地址：</span><span
id="MACAddressPopup">00:0c:26:03:36:30<--->00:1f:2e:00:07:8f</span></li>
</ul>
<table id="tablePopup">
<thead>
<tr>
<th>记录时间</th>
<th>功能码</th>
<th>起始地址</th>
<th>终止地址</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="tablePopupBottom" id="tablePopupBottom">
<button class="first" id="firstPagePopup">首页</button>
<button id="prevPagePopup">上一页</button>
<p>
<span>第</span>
<span id="nowPagePopup">1</span>
<span>页</span>
<span>/</span>
<span>共</span>
<span id="totalPagePopup">9</span>
<span>页</span>
</p>
<button id="nextPagePopup">下一页</button>
<button id="lastPagePopup">尾页</button>
<input type="text" id="leapPopup"/>
<label for="leap">跳转</label>
</div>
</div>
<!--以上是遮罩-->
</div>
</body>
</html>
<script type="text/javascript">
$(function () {
var nowPage = 1;
var totalPage = 0;
var pageNumberPopup = 1;
var totalPagePopup = 0;
var privateID = null;
var dataServer = {
"data": [
{
"input": "<input type=‘checkbox‘/>",
"startTime": "2018年",
"IP": "255.255.255.255",
"MAC": "255.255.255.255",
"port": "端口1",
"protocolType": "协议类型1",
"id": "1"
},
{
"input": "<input type=‘checkbox‘/>",
"startTime": "2018年",
"IP": "255.255.255.255",
"MAC": "255.255.255.255",
"port": "端口1",
"protocolType": "协议类型1",
"id": "2"
},
{
"input": "<input type=‘checkbox‘/>",
"startTime": "2018年",
"IP": "255.255.255.255",
"MAC": "255.255.255.255",
"port": "端口1",
"protocolType": "协议类型1",
"id": "3"
},
{
"input": "<input type=‘checkbox‘/>",
"startTime": "2018年",
"IP": "255.255.255.255",
"MAC": "255.255.255.255",
"port": "端口1",
"protocolType": "协议类型1",
"id": "4"
}
],
"totalPage": 5,
"page": 1
};
var dataDetail={
"data":[["2018-04-14 21:39:14", "Read_Coils", "127.0.0.1", "127.0.0.2"],["2018-04-14 21:39:14", "Read_Coils", "127.0.0.1", "127.0.0.2"]],
"protoType":"协议类型1",
"startTime":"2018.3.4",
"port":"端口1",
"ip":"127.0.0.1",
"mac":"efew:eff:33",
"title":["记录时间","功能码","起始地址","终止地址"],
"totalPage": 5,
"page": 1,
"record": 9999
};
$.ajax({
type: ‘get‘,
/*url: */
success: function (data) {
data = dataServer;
var table = $("#table");
var tableBody = table.children("tbody");
tableBody.empty();
var str = "";
totalPage = data.totalPage;
nowPage = data.page;
$.each(data.data, function (index, value) {
str += "<tr privateID=" + value.id + ">";
str += "<td>" + value.input + "</td>";
str += "<td>" + index + "</td>";
str += "<td>" + value.startTime + "</td>";
str += "<td>" + value.IP + "</td>";
str += "<td>" + value.MAC + "</td>";
str += "<td>" + value.port + "</td>";
str += "<td>" + value.protocolType + "</td>";
str += "<td>" + "<span class=‘tableSpanDetail‘>详情</span>" + "</td>";
str += "</tr>";
});
tableBody.html(str);
$("#nowPage").text(nowPage);
$("#totalPage").text(totalPage);
singleInput();
tableSpanDetail();
}
});
$("#bottomFilter").click(function (event) {
var eventTargetTagName = event.target.tagName.toUpperCase();
var eventTargetInnerText = event.target.innerText;
if (eventTargetTagName === "BUTTON") {
if (eventTargetInnerText === "首页") {
if (nowPage === 1) {
return;
}
nowPage = 1;
} else if (eventTargetInnerText === "上一页") {
if (nowPage === 1) {
return;
}
nowPage--;
} else if (eventTargetInnerText === "下一页") {
if (nowPage === totalPage) {
return;
}
nowPage++;
} else if (eventTargetInnerText === "尾页") {
if (nowPage === totalPage) {
return;
}
nowPage = totalPage;
}
} else if (eventTargetTagName === "LABEL") {
if (eventTargetInnerText === "跳转") {
var leap = $("#leap");
var leapPage = leap.val();
if (leapPage > totalPage) {
leap.val(totalPage);
} else {
nowPage = leapPage;
}
}
}
$.ajax({
type: ‘get‘,
/* url: "",*/
success: function (data) {
data = dataServer;
var table = $("#table");
var tableBody = table.children("tbody");
tableBody.empty();
var str = "";
totalPage = data.totalPage;
$.each(data.data, function (index, value) {
str += "<tr privateID=" + value.id + ">";
str += "<td>" + value.input + "</td>";
str += "<td>" + index + "</td>";
str += "<td>" + value.startTime + "</td>";
str += "<td>" + value.IP + "</td>";
str += "<td>" + value.MAC + "</td>";
str += "<td>" + value.port + "</td>";
str += "<td>" + value.protocolType + "</td>";
str += "<td>" + "<span class=‘tableSpanDetail‘>详情</span>" + "</td>";
str += "</tr>";
});
tableBody.html(str);
console.log(nowPage);
$("#nowPage").text(nowPage);
$("#totalPage").text(totalPage);
singleInput();
tableSpanDetail();
}
});
});
$("#tablePopupBottom").click(function (event) {
var eventTargetTagName = event.target.tagName.toUpperCase();
var eventTargetInnerText = event.target.innerText;
if (eventTargetTagName === "BUTTON") {
if (eventTargetInnerText === "首页") {
if (pageNumberPopup === 1) {
return;
}
pageNumberPopup = 1;
} else if (eventTargetInnerText === "上一页") {
if (pageNumberPopup === 1) {
return;
}
pageNumberPopup--;
} else if (eventTargetInnerText === "下一页") {
if (pageNumberPopup === totalPagePopup) {
return;
}
pageNumberPopup++;
} else if (eventTargetInnerText === "尾页") {
if (pageNumberPopup === totalPagePopup) {
return;
}
pageNumberPopup = totalPagePopup;
}
} else if (eventTargetTagName === "LABEL") {
if (eventTargetInnerText === "跳转") {
var leapPopup = $("#leapPopup");
var leapPagePopup = leapPopup.val();
if (leapPagePopup > totalPagePopup) {
leapPopup.val(totalPagePopup);
} else {
pageNumberPopup = leapPagePopup;
}
}
}
$.ajax({
type: ‘get‘,
url: "",
success: function (data) {
data=dataDetail;
var table = $("#tablePopup");
var tableBody = table.children("tbody");
tableBody.empty();
var str = "";
$.each(data.data, function (index, value) {
str += "<tr>";
for (var i = 0; i < value.length; i++) {
str += "<td>" + value[i] + "</td>";
}
str += "</tr>";
});
tableBody.html(str);
$("#nowPagePopup").text(pageNumberPopup);
$("#totalPagePopup").text(totalPagePopup);
}
});
});
$("#allChecked").click(function () {
if ($(this).is(‘:checked‘)) {
$("tbody tr td input[type=checkbox]").prop("checked", true);
} else {
$(this).prop("checked", false);
$("tbody tr td input[type=checkbox]").prop("checked", false);
}
});
function singleInput() {
var $allCheck = $("tbody tr td input[type=checkbox]");
$allCheck.each(function () {
$(this).click(function () {
if ($(this).is(‘:checked‘)) {
var len = $allCheck.length;
var num = $("tbody tr td input[type=checkbox]:checked").length;
if (num == len) {
$allCheck.prop("checked", true);
$("#allChecked").prop("checked", true);
}
} else {
$(this).prop("checked", false);
$("#allChecked").prop("checked", false);
}
})
});
}
function tableSpanDetail() {
$(".tableSpanDetail").each(function (index, input) {
$(this).click(function () {
pageNumberPopup = 1;
privateID = $(this).parent().parent().attr("privateID");
$.ajax({
type: ‘get‘,
url: "",
success: function (data) {
data=dataDetail;
totalPagePopup = data.totalPage;
var title = data.title;
var table = $("#tablePopup");
var tableHead = table.children("thead");
var tableBody = table.children("tbody");
tableHead.empty();
tableBody.empty();
$("#protocolTypePopup").html(data.protoType);
$("#startTimePopup").html(data.startTime);
$("#portPopup").html(data.port);
$("#IPAddressPopup").html(data.ip);
$("#MACAddressPopup").html(data.mac);
var tableHeadStr = "";
tableHeadStr += "<tr>";
for (var i = 0; i < title.length; i++) {
tableHeadStr += "<th>" + title[i] + "</th>";
}
tableHeadStr += "</tr>";
tableHead.html(tableHeadStr);
var tableBodyStr = "";
$.each(data.data, function (index, value) {
tableBodyStr += "<tr>";
for (var i = 0; i < title.length; i++) {
tableBodyStr += "<td>" + value[i] + "</td>";
}
tableBodyStr += "</tr>";
});
tableBody.html(tableBodyStr);
$("#nowPagePopup").text(pageNumberPopup);
$("#totalPagePopup").text(totalPagePopup);
}
});
$("#appearMark").css("display", "block");
$("#appearMarkInner").css("display", "block");
$("#clickDisappear").click(function () {
$("#appearMark").css("display", "none");
$("#appearMarkInner").css("display", "none");
})
});
});
}
})
</script>
```
标签：select each prototype ARMAR port int body tar cas
原文地址：https://www.cnblogs.com/gushixianqiancheng/p/10966673.html
