테이블 복제 및 복제 테이블 복제 중지

페이지를 종료하고 돌아갈 때마다 다른 테이블이 인쇄됩니다. '여기를 클릭하십시오'버튼을 클릭 한 다음 뒤로 버튼을 클릭하고 '여기를 클릭하십시오'를 다시 클릭하면 문제를 보면서 문제를 볼 수 있습니다. 두 페이지에서 앞뒤로 이동할 때마다 코드가 표를 인쇄하지 못하도록하고 싶습니다. 또한 테이블을 재설정하고 싶습니다. 셀을 클릭하면 색상이 변경되고 페이지에서 앞뒤로 이동하면 셀은 여전히 흰색으로 변합니다. 코드를 줄이면 문제를 쉽게 찾을 수 있습니다.테이블 복제 및 복제 테이블 복제 중지

코드 :

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="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>

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; 
    }

출처

2016-11-03 Suhan Gui

문제가있는 라인이있다 :

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

append 함수는 이미 tableContainer div에 이미있는 내용의 끝에 새 콘텐츠를 추가하려고합니다.

변경이이 :

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

그리고 DIV의 내용이 완전히 때마다 대체됩니다.

출처

2016-11-03 18:55:07

테이블 복제 및 복제 테이블 복제 중지

답변

관련 문제