從JavaScript在表格中打印文本的奇怪行為
[英]Strange behavior printing text in a Table from JavaScript
問題描述
我正在嘗試使用for循環，條件等在多個表中打印一些已解析的文本。
假設對於頁面a（hardening.html），一切正常。 但是對於頁面b（boot.html），使用相同的代碼（適用於頁面b），它不起作用。 由於某種原因，同一文本始終被覆蓋。
這是演示：（正確） （錯誤->它始終在屏幕上顯示TEST PASSED，但不是真的）
BOOT-5122狀態的期望值為： Set a password on GRUB bootloader to prevent altering boot configuration...以及BOOT-5180的期望值是Determine runlevel and services at startup但是我一直都在通過TEST PASSED ...為什么？ 怎么了？
和代碼（簡體）：
Hardening.html：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen">
<link rel="stylesheet" href="../css/menu.css" type="text/css" media="screen">
<link rel="stylesheet" href="../css/tabletest.css" type="text/css" media="screen">
</head>
<body>
<!--Añadimos al area principal el efecto acordeon con el texto -->
<section class="mainArea" align="center">
<H1><CENTER>HARDENING TESTS AND SUGGESTIONS</H1></CENTER>
<div class="testTable" id="testTable">
<script>
var testsRecovered = localStorage.getItem("tests");
var suggestionsRecovered = localStorage.getItem("suggestions");
var testsParsed = ["HRDN-7220", "HRDN-7230", "HRDN-7222"];
var suggestionsParsed = ["HRDN-7222 Harden compilers like restricting access to root user only"];
var body = document.getElementById('testTable');
var table = document.createElement('table');
body.appendChild(table);
var tr = document.createElement('tr');
table.appendChild(tr);
var td = document.createElement('td');
var td2 = document.createElement('td');
tr.appendChild(td);
tr.appendChild(td2);
var txt = document.createTextNode('Test ID');
var txt2 = document.createTextNode('Status');
td.appendChild(txt);
td2.appendChild(txt2);
var txt4 = null;
for (var i = 0; i < testsParsed.length; i++) {
if(testsParsed[i].includes("HRDN")){
var tr2 = document.createElement('tr');
table.appendChild(tr2);
var td3 = document.createElement('td');
var td4 = document.createElement('td');
tr2.appendChild(td3);
tr2.appendChild(td4);
for (var j = 0; j < suggestionsParsed.length; j++) {
if(suggestionsParsed[j].includes(testsParsed[i])){
txt4 = document.createTextNode(suggestionsParsed[j]);
}
else{
txt4 = document.createTextNode("TEST PASSED ✓");
}
}
var txt3 = document.createTextNode(testsParsed[i]);
td3.appendChild(txt3);
td4.appendChild(txt4);
if(txt4.textContent.includes("TEST PASSED")){
td4.style.cssText = 'font-weight: bold;color: green;';
}
else{
td4.style.color = "orange";
td4.style.cssText = 'font-weight: bold;color: orange;';
}
}
}
</script>
</div>
</section>
<!-- MENU -->
<div class="container">
<ul id="nav">
<li><a href="#"><img src="../images/t1.png" /> Dashboard</a></li>
<li><a href="#" class="sub" tabindex="1"><img src="../images/t2.png" />Reporting</a><img src="images/up.gif" alt="" />
<ul>
<li><a href="llog.html"><img src="../images/empty.gif" />LYNIS LOG</a></li>
<li><a href="#"><img src="../images/empty.gif" />LYNIS REPORT</a></li>
</ul>
</li>
<li><a href="#" class="sub" tabindex="1"><img src="../images/t3.png" />Lynis Tests</a><img src="images/up.gif" alt="" />
<ul>
<li><a href="./tests/accounting.html"><img src="images/empty.gif" />Accounting</a></li>
<li><a href="./tests/authentication.html"><img src="images/empty.gif" />Authentication</a></li>
<li><a href="./tests/banner.html"><img src="images/empty.gif" />Banner</a></li>
<li><a href="./tests/boot.html"><img src="images/empty.gif" />Boot</a></li>
<li><a href="./tests/crypto.html"><img src="images/empty.gif" />Crypto</a></li>
<li><a href="./tests/fileint.html"><img src="images/empty.gif" />File Integrity</a></li>
<li><a href="./tests/firewall.html"><img src="images/empty.gif" />Firewall</a></li>
<li><a href="./tests/hardening.html"><img src="images/empty.gif" />Hardening</a></li>
<li><a href="./tests/kernel.html"><img src="images/empty.gif" />Kernel</a></li>
<li><a href="./tests/logging.html"><img src="images/empty.gif" />Logging</a></li>
<li><a href="./tests/mail.html"><img src="images/empty.gif" />Mail</a></li>
<li><a href="./tests/malware.html"><img src="images/empty.gif" />Malware</a></li>
<li><a href="./tests/nameservers.html"><img src="images/empty.gif" />Nameservers</a></li>
<li><a href="./tests/networking.html"><img src="images/empty.gif" />Networking</a></li>
<li><a href="./tests/php.html"><img src="images/empty.gif" />PHP</a></li>
<li><a href="./tests/printing.html"><img src="images/empty.gif" />Printing</a></li>
<li><a href="./tests/processes.html"><img src="images/empty.gif" />Processes</a></li>
<li><a href="./tests/shell.html"><img src="images/empty.gif" />Shell</a></li>
<li><a href="./tests/software.html"><img src="images/empty.gif" />Software</a></li>
<li><a href="./tests/squid.html"><img src="images/empty.gif" />Squid</a></li>
<li><a href="./tests/ssh.html"><img src="images/empty.gif" />SSH</a></li>
<li><a href="./tests/storage.html"><img src="images/empty.gif" />Storage</a></li>
<li><a href="./tests/time.html"><img src="images/empty.gif" />Time</a></li>
<li><a href="./tests/tooling.html"><img src="images/empty.gif" />Tooling</a></li>
<li><a href="./tests/web.html"><img src="images/empty.gif" />Web</a></li>
</ul>
</li>
<li><a href="#"><img src="../images/t2.png" />Overview</a></li>
</ul>
</div>
<!-- END MENU -->
</body>
</html>
Boot.html：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen">
<link rel="stylesheet" href="../css/menu.css" type="text/css" media="screen">
<link rel="stylesheet" href="../css/tabletest.css" type="text/css" media="screen">
</head>
<body>
<!--Añadimos al area principal el efecto acordeon con el texto -->
<section class="mainArea" align="center">
<H1><CENTER>BOOT TESTS AND SUGGESTIONS</H1></CENTER>
<div class="testTable" id="testTable">
<script>
var testsRecovered = localStorage.getItem("tests");
var suggestionsRecovered = localStorage.getItem("suggestions");
var testsParsed = ["BOOT-5260", "BOOT-5202", "BOOT-5184", "BOOT-5180", "BOOT-5177", "BOOT-5155", "BOOT-5142", "BOOT-5139", "BOOT-5122", "BOOT-5121", "BOOT-5104"];
var suggestionsParsed = ["BOOT-5122 Set a password on GRUB bootloader to prevent altering boot configuration (e.g. boot in single user mode without password)", "BOOT-5180 Determine runlevel and services at startup"];
var body = document.getElementById('testTable');
var table = document.createElement('table');
body.appendChild(table);
var tr = document.createElement('tr');
table.appendChild(tr);
var td = document.createElement('td');
var td2 = document.createElement('td');
tr.appendChild(td);
tr.appendChild(td2);
var txt = document.createTextNode('Test ID');
var txt2 = document.createTextNode('Status');
td.appendChild(txt);
td2.appendChild(txt2);
var txt4 = null;
for (var i = 0; i < testsParsed.length; i++) {
if(testsParsed[i].includes("BOOT")){
var tr2 = document.createElement('tr');
table.appendChild(tr2);
var td3 = document.createElement('td');
var td4 = document.createElement('td');
tr2.appendChild(td3);
tr2.appendChild(td4);
for (var j = 0; j < suggestionsParsed.length; j++) {
if(suggestionsParsed[j].includes(testsParsed[i])){
txt4 = document.createTextNode(suggestionsParsed[j]);
}
else{
txt4 = document.createTextNode("TEST PASSED ✓");
}
}
var txt3 = document.createTextNode(testsParsed[i]);
td3.appendChild(txt3);
td4.appendChild(txt4);
if(txt4.textContent.includes("TEST PASSED")){
td4.style.cssText = 'font-weight: bold;color: green;';
}
else{
td4.style.color = "orange";
td4.style.cssText = 'font-weight: bold;color: orange;';
}
}
}
</script>
</div>
</section>
<!-- MENU -->
<div class="container">
<ul id="nav">
<li><a href="#"><img src="../images/t1.png" /> Dashboard</a></li>
<li><a href="#" class="sub" tabindex="1"><img src="../images/t2.png" />Reporting</a><img src="images/up.gif" alt="" />
<ul>
<li><a href="llog.html"><img src="../images/empty.gif" />LYNIS LOG</a></li>
<li><a href="#"><img src="../images/empty.gif" />LYNIS REPORT</a></li>
</ul>
</li>
<li><a href="#" class="sub" tabindex="1"><img src="../images/t3.png" />Lynis Tests</a><img src="images/up.gif" alt="" />
<ul>
<li><a href="./tests/accounting.html"><img src="images/empty.gif" />Accounting</a></li>
<li><a href="./tests/authentication.html"><img src="images/empty.gif" />Authentication</a></li>
<li><a href="./tests/banner.html"><img src="images/empty.gif" />Banner</a></li>
<li><a href="./tests/boot.html"><img src="images/empty.gif" />Boot</a></li>
<li><a href="./tests/crypto.html"><img src="images/empty.gif" />Crypto</a></li>
<li><a href="./tests/fileint.html"><img src="images/empty.gif" />File Integrity</a></li>
<li><a href="./tests/firewall.html"><img src="images/empty.gif" />Firewall</a></li>
<li><a href="./tests/hardening.html"><img src="images/empty.gif" />Hardening</a></li>
<li><a href="./tests/kernel.html"><img src="images/empty.gif" />Kernel</a></li>
<li><a href="./tests/logging.html"><img src="images/empty.gif" />Logging</a></li>
<li><a href="./tests/mail.html"><img src="images/empty.gif" />Mail</a></li>
<li><a href="./tests/malware.html"><img src="images/empty.gif" />Malware</a></li>
<li><a href="./tests/nameservers.html"><img src="images/empty.gif" />Nameservers</a></li>
<li><a href="./tests/networking.html"><img src="images/empty.gif" />Networking</a></li>
<li><a href="./tests/php.html"><img src="images/empty.gif" />PHP</a></li>
<li><a href="./tests/printing.html"><img src="images/empty.gif" />Printing</a></li>
<li><a href="./tests/processes.html"><img src="images/empty.gif" />Processes</a></li>
<li><a href="./tests/shell.html"><img src="images/empty.gif" />Shell</a></li>
<li><a href="./tests/software.html"><img src="images/empty.gif" />Software</a></li>
<li><a href="./tests/squid.html"><img src="images/empty.gif" />Squid</a></li>
<li><a href="./tests/ssh.html"><img src="images/empty.gif" />SSH</a></li>
<li><a href="./tests/storage.html"><img src="images/empty.gif" />Storage</a></li>
<li><a href="./tests/time.html"><img src="images/empty.gif" />Time</a></li>
<li><a href="./tests/tooling.html"><img src="images/empty.gif" />Tooling</a></li>
<li><a href="./tests/web.html"><img src="images/empty.gif" />Web</a></li>
</ul>
</li>
<li><a href="#"><img src="../images/t2.png" />Overview</a></li>
</ul>
</div>
<!-- END MENU -->
</body>
</html>
layout.css：
*{
margin:0;
padding:0;
}
body {
background-color:#bababa;
}
div#fileOutput{
margin: auto;
margin-top: 50px;
margin-left: 250px;
margin-right: 50px;
margin-bottom: 50px;
width: 960px;
height: 800px;
white-space: pre-line;
border: solid 1px black;
padding: 5px;
}
input[type="file"]{
margin: auto;
width: 960px;
height: 50px;
margin-left: 250px;
white-space: pre-line;
border: solid 1px black;
padding: 5px;
}
.mainArea {
margin: auto;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
display: block;
margin-bottom: auto;
width: 960px;
white-space: pre-line;
border: solid 1px black;
padding: 10px;
}
menu.css：
#nav {
border:3px solid #3e4547;
box-shadow:2px 2px 8px #000000;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
position: fixed;
top: 0; left: 0;
}
#nav, #nav ul {
list-style:none;
padding:0;
width:200px;
}
#nav ul {
position:relative;
z-index:-1;
}
#nav li {
position:relative;
z-index:100;
}
#nav ul li {
margin-top:-23px;
-moz-transition: 0.4s linear 0.4s;
-ms-transition: 0.4s linear 0.4s;
-o-transition: 0.4s linear 0.4s;
-webkit-transition: 0.4s linear 0.4s;
transition: 0.4s linear 0.4s;
}
#nav li a {
background-color:#d4d5d8;
color:#000;
display:block;
font-size:12px;
font-weight:bold;
line-height:28px;
outline:0;
padding-left:15px;
text-decoration:none;
}
#nav li a.sub {
background:#d4d5d8 url("../images/down.gif") no-repeat;
}
#nav li a + img {
cursor:pointer;
display:none;
height:28px;
left:0;
position:absolute;
top:0;
width:200px;
}
#nav li a img {
border-width:0px;
height:24px;
line-height:28px;
margin-right:8px;
vertical-align:middle;
width:24px;
}
#nav li a:hover {
background-color:#bcbdc1;
}
#nav ul li a {
background-color:#eee;
border-bottom:1px solid #ccc;
color:#000;
font-size:11px;
line-height:22px;
}
#nav ul li a:hover {
background-color:#ddd;
color:#444;
}
#nav ul li a img {
background: url("../images/bulb.png") no-repeat;
border-width:0px;
height:16px;
line-height:22px;
margin-right:5px;
vertical-align:middle;
width:16px;
}
#nav ul li:nth-child(odd) a img {
background:url("../images/bulb2.png") no-repeat;
}
#nav a.sub:focus {
background:#bcbdc1;
outline:0;
}
#nav a:focus ~ ul li {
margin-top:0;
-moz-transition: 0.4s linear;
-ms-transition: 0.4s linear;
-o-transition: 0.4s linears;
-webkit-transition: 0.4s linears;
transition: 0.4s linear;
}
#nav a:focus + img, #nav a:active + img {
display:block;
}
#nav a.sub:active {
background:#bcbdc1;
outline:0;
}
#nav a:active ~ ul li {
margin-top:0;
}
#nav ul:hover li {
margin-top:0;
}
tabletest.css：
.testTable {
margin:0px;padding:0px;
width:100%;
-moz-border-radius-bottomleft:6px;
-webkit-border-bottom-left-radius:6px;
border-bottom-left-radius:6px;
-moz-border-radius-bottomright:6px;
-webkit-border-bottom-right-radius:6px;
border-bottom-right-radius:6px;
-moz-border-radius-topright:6px;
-webkit-border-top-right-radius:6px;
border-top-right-radius:6px;
-moz-border-radius-topleft:6px;
-webkit-border-top-left-radius:6px;
border-top-left-radius:6px;
}.testTable table{
border-collapse: collapse;
border-spacing: 0;
width:100%;
height:100%;
margin:0px;padding:0px;
}.testTable tr:last-child td:last-child {
-moz-border-radius-bottomright:6px;
-webkit-border-bottom-right-radius:6px;
border-bottom-right-radius:6px;
}
.testTable table tr:first-child td:first-child {
-moz-border-radius-topleft:6px;
-webkit-border-top-left-radius:6px;
border-top-left-radius:6px;
}
.testTable table tr:first-child td:last-child {
-moz-border-radius-topright:6px;
-webkit-border-top-right-radius:6px;
border-top-right-radius:6px;
}.testTable tr:last-child td:first-child{
-moz-border-radius-bottomleft:6px;
-webkit-border-bottom-left-radius:6px;
border-bottom-left-radius:6px;
}.testTable tr:hover td{
background-color:#d3e9ff;
}
.testTable td{
vertical-align:middle;
background-color:#aad4ff;
border:1px solid #000000;
border-width:0px 1px 1px 0px;
text-align:left;
padding:20px;
color:#000000;
}.testTable tr:last-child td{
border-width:0px 1px 0px 0px;
}.testTable tr td:last-child{
border-width:0px 0px 1px 0px;
}.testTable tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.testTable tr:first-child td{
background:-o-linear-gradient(bottom, #0057af 5%, #0057af 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0057af), color-stop(1, #0057af) );
background:-moz-linear-gradient( center top, #0057af 5%, #0057af 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#0057af", endColorstr="#0057af"); background: -o-linear-gradient(top,#0057af,0057af);
background-color:#0057af;
border:0px solid #000000;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Arial;
font-weight:bold;
color:#ffffff;
}
.testTable tr:first-child:hover td{
background:-o-linear-gradient(bottom, #0057af 5%, #0057af 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0057af), color-stop(1, #0057af) );
background:-moz-linear-gradient( center top, #0057af 5%, #0057af 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#0057af", endColorstr="#0057af"); background: -o-linear-gradient(top,#0057af,0057af);
background-color:#0057af;
}
.testTable tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.testTable tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
1 個解決方案
解決方案1
0 已采納 2016-04-20 20:40:32
在您的Boot.html ：
for (var j = 0; j < suggestionsParsed.length; j++) {
if(suggestionsParsed[j].includes(testsParsed[i])){
txt4 = document.createTextNode(suggestionsParsed[j]);
}
else{
txt4 = document.createTextNode("TEST PASSED ✓");
}
}
在我的測試中， BOOT-5180返回錯誤描述，這很容易找出BOOT-5122為何變為PASSED的原因 。 這是因為suggestionsParsed[j]的循環順序。 如果該操作如果上述返回true suggestionsParsed包括以代碼testsParsed ，但如果它發生在第一陣列suggestionsParsed ，環路仍然會繼續，如果將返回false其后。
簡單的簡單解決方法是添加一個break ：
if(suggestionsParsed[j].includes(testsParsed[i])){
txt4 = document.createTextNode(suggestionsParsed[j]);
break;
}
但是，通過學習javascript編碼中的一些最佳實踐或使用jQuery之類的新庫，可以避免您在執行該項目時可能遇到的大多數問題。 希望這有助於解決您的問題。
IE上的Javascript奇怪行為
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.