테이블 내에 2 차원 배열을 만드는 방법은 무엇입니까?

Connect Four 게임을위한 테이블을 만들고 싶습니다. 2 차원 7 * 6 배열을 설정하여이 작업을 수행하고 각 배열을 각 셀 안에 넣는 것이 좋습니다. 나는 자바에 익숙하지 않고 객체 지향 프로그래밍에 대한 많은 지식을 가지고 있지 않다. 각 셀에 xPosition 및 yPosition (좌표, 아마도 "id"에있을 수 있음)을 지정하려고합니다. 그러면 게임에서 파란색 또는 노란색 행 또는 열이 있는지 확인할 수 있습니다.테이블 내에 2 차원 배열을 만드는 방법은 무엇입니까?

코드 지금까지, 거친 시도 : jQuery를 작성

function make() 
    { 
    var table = document.createElement("table"); 
    for (var i = 0; i < 6; i++) 
    { 
    var row = table.inserRow(); 
    for (var j = 0; j < 5; j++) 
    { 
    var cell = row.insertCell; 
    } 
    document.body.appendChild(table); 
    } 
    }

출처

2013-05-14 Ben Taylor

jQuery를 사용할 수 있습니까? 훨씬 쉬울 것입니다 ... – Karol

idnt는 그것을 사용하는 방법이 아니라 내 코드에 jquery를 가져 오는 방법을 알고 있습니다. –

일부 정말 빠른 해결책. 전체 HTML을 붙여 넣었으므로 HTML 파일로 저장하고 브라우저에서 열 수 있습니다. 셀을 클릭하여 좌표 (0 기준)를 볼 수 있습니다. 당신이 rows 및 cols 변수를 변경 한 경우에는 더 큰 그리드를 그릴 수 있다는

는

<html> 
    <head> 
     <title>GRID</title> 
     <style type="text/css"> 
      table tr td { width: 50px; height: 50px; background-color: silver; border: 1px solid black; } 
      table tr td.over { background-color: yellow; } 
      table tr td.active { background-color: red; } 
      .controls { padding: 20px; } 
     </style> 
    </head> 
    <body> 
     <div class="controls"> 
      <a href="javascript:void(0)" data-move="[-1, 0]">left</a> 
      <a href="javascript:void(0)" data-move="[0, -1]">top</a> 
      <a href="javascript:void(0)" data-move="[1, 0]">right</a> 
      <a href="javascript:void(0)" data-move="[0, 1]">bottom</a> 
      <a href="javascript:void(0)" data-move="[-1, -1]">topleft</a> 
      <a href="javascript:void(0)" data-move="[1, -1]">topright</a> 
      <a href="javascript:void(0)" data-move="[1, 1]">bottomright</a> 
      <a href="javascript:void(0)" data-move="[-1, 1]">bottomleft</a> 
     </div> 
     <table></table> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script type="text/javascript"> 
     $(document).ready(function() { 
      var rows = 6, 
       cols = 7; 

      for(var i = 0; i < rows; i++) { 
       $('table').append('<tr></tr>'); 
       for(var j = 0; j < cols; j++) { 
        $('table').find('tr').eq(i).append('<td></td>'); 
        $('table').find('tr').eq(i).find('td').eq(j).attr('data-row', i).attr('data-col', j); 
       } 
      } 

      $('table tr td').mouseover(function() { 
       $(this).addClass('over'); 
      }).mouseout(function() { 
       $(this).removeClass('over'); 
      }).click(function() { 
       $(this).addClass('active'); 
      }); 

      $(".controls a").click(function() { 
       var $active = $("table tr td.active"); 
       if($active.length > 0) { 
        var move = $.parseJSON($(this).attr('data-move')); 
        if(move.length >= 2) { 
         $active.each(function() { 
          var row = parseInt($(this).attr('data-row')) + move[1], 
           col = parseInt($(this).attr('data-col')) + move[0]; 
          if(col >= cols) col = cols - 1; 
          if(col < 0) col = 0; 
          if(row >= rows) row = rows - 1; 
          if(row < 0) row = 0; 
          $(this).removeClass('active'); 
          $('table tr').eq(row).find('td').eq(col).addClass('active'); 
         }); 
        } 
       } 
      }); 
     }); 
     </script> 
    </body> 
</html>

알 수 있습니다.

버튼으로 controls div를 추가 했으므로 길 찾기를 할 수 있습니다. 먼저 요소를 활성으로 표시해야하며 클릭하면 이동할 수 있습니다.

여러 필드를 표시하고 한꺼번에 이동할 수있는 버그 (또는 내 의견에는 기능)가 하나 있습니다.

시작하기에 좋은 기초입니다!

출처

2013-05-15 06:54:12 Karol

와우! 저건 완벽 해! 나이를 먹으려 고 노력해 왔습니다. 그리고 이것은 독창적으로 이루어졌습니다! 도와 주셔서 감사합니다! 추신. 나는 단지 1 평판 밖에 가지고 있지 않기 때문에 대답을 표시 할 수 없다! –

@BenTaylor - 그건 괜찮아요. 나는 15 분 밖에 안 걸렸습니다. 제가 도왔 기 때문에 기쁩니다. – Karol

저는 최근에 클릭 한 사람 옆에있는 td로 이동해야하는 경우를 최근에 보았습니다. 대략 내가 뭘하고 싶고 이것을 프로그래밍했는지 알기 때문에 행 값에 광고를 올리시겠습니까? 그런 다음 $ (this) 등등을 수행합니까? 아니면 그것에 더 있습니까? @ 카를로스 –

테이블 내에 2 차원 배열을 만드는 방법은 무엇입니까?

답변

관련 문제