每次我退出该页面并返回该页面时，都会打印另一个表格。单击“单击此处”按钮，然后单击后退按钮，然后再次单击“单击此处”查看问题。我想防止代码每次从两页来回打印表格。我也想重置 table 。如果您单击某个单元格，它会改变颜色，如果您在页面上来回移动，该单元格仍为白色。 我缩短了代码，以便更容易找到问题。
代码:
Js 和 jQuery:
$(document).ready(function() {
$('.page2').hide();
$('#click').click(function() {
$('.page1').hide();
$('.page2').show();
function generateGrid( rows, cols ) {
var grid = "<table>";
for ( row = 1; row <= rows; row++ ) {
grid += "<tr>";
for ( col = 1; col <= cols; col++ ) {
grid += "<td></td>";
}
grid += "</tr>";
}
return grid;
}
$( "#tableContainer" ).append( generateGrid( 10, 10) );
$( "td" ).click(function() {
var index = $( "td" ).index( this );
var row = Math.floor( ( index ) / 5) + 1;
$( this ).css( 'background-color', 'white' );
});
$('.back').click(function(){
$('.page2').hide();
$('.page1').show();
});
});
});
HTML:
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>Tic-Tac-Toe Pro</title>
</head>
<body>
<div class="page1">
<p id="click">click here</p>
</div>
<div class="page2">
<div class="back">
<img src="/image/Fw96Z.png">
</div>
</br>
<span></span>
<div id="tableContainer"></div>
</div>
<script type='text/javascript' src='app.js'></script>
</body>
</html>
CSS:
.page1 {
font-family:Calibri;
height: 100%;
width:100%;
}
div{
display:inline-block;
}
#click{
position:absolute;
background-color:Yellow;
width:300px;
height:100px;
cursor: pointer;
font-size: 50;
}
.back{
margin-top: 10px;
margin-left:10px;
cursor: pointer;
}
img{
width:20%;
}
.page2 {
background-color: #B9D7D9;
height: 100%;
width:100%;
}
td {
border: 1px solid;
width: 25px;
height: 25px;
}
table {
border-collapse: collapse;
}
最佳答案
有问题的行是这样的:
$( "#tableContainer" ).append( generateGrid( 10, 10) );
append 函数只是将新内容添加到 tableContainer div 中已有内容的末尾。
将其更改为:
$( "#tableContainer" ).html( generateGrid( 10, 10) );
并且该div的内容每次都会被完全替换。
关于javascript - 重置表并停止表复制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40408924/