Question

每次退出页面并返回页面时，都会打印另一个表格。单击“单击此处”按钮，然后单击后退按钮，然后再次单击“单击此处”以查看问题以查看问题。我想阻止代码每次来自两页时打印一个表。我也想重置表格。如果单击一个单元格，它会改变颜色，如果您从页面来回移动，则单元格仍然是白色的。我缩短了代码，以便更容易找到问题。

代码：

Js＆amp; jQuery的：

lapply

HTML：

$(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();
        });
    });
});

CSS：

<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="http://i.stack.imgur.com/Fw96Z.png">
            </div>
            </br>
            <span></span>
            <div id="tableContainer"></div>
        </div>

    <script type='text/javascript' src='app.js'></script>
    </body>
</html>

Answer 1

有问题的一行是：

$( "#tableContainer" ).append( generateGrid( 10, 10) );

append函数只是将新内容添加到tableContainer div中已有的内容的末尾。

改变它：

$( "#tableContainer" ).html( generateGrid( 10, 10) );

每次都会完全替换该div的内容。

重置表和停止表复制

1 个答案: