Как поместить элементы массива в сетку таблицы? - PullRequest
Новая
       12

Как поместить элементы массива в сетку таблицы?

0 голосов
/ 12 мая 2019

У меня есть цикл for внутри другого, чтобы составить таблицу значений в javascript. Я хочу вставить эти значения в разные таблицы таблицы в HTML.

У меня есть этот код, чтобы составить таблицу из нулей: 

function createTurtleBoard(boardSize) {
    let tabuleiro = [boardSize];
    for (var row = 0; row < boardSize; row++) {
        tabuleiro[row] = [boardSize];
        for (var column = 0; column < boardSize; column++) {
            tabuleiro[row][column] = 0;
            //playerPosition.addEventListener('click', movePlayer, false)
        }
    }
    return tabuleiro;
}

function boardOnScreen(boardSize) {
    let board = ''
    for (var row = 0; row < boardSize.length; row++) {
        for (var column = 0; column < boardSize.length; column++) {
            board += boardSize[row][column] + ' '
        }
        board = board + '</br>'
    }
    return board;
}

Я хочу вставить эти значения в готовую HTML-таблицу: 

<body>
  <table id="tableOfGame">
    <tr>
      <td><div id="t11" onclick="select(1,1);"></div></td>
      <td><div id="t12" onclick="select(1,2);"></div></td>
      <td><div id="t13" onclick="select(1,3);"></div></td>
      <td><div id="t14" onclick="select(1,4);"></div></td>
      <td><div id="t15" onclick="select(1,5);"></div></td>
      <td><div id="t16" onclick="select(1,6);"></div></td>
      <td><div id="t17" onclick="select(1,7);"></div></td>
      <td><div id="t18" onclick="select(1,8);"></div></td>
    </tr>
    <tr>
      <td><div id="t21" onclick="select(2,1);"></div></td>
      <td><div id="t22" onclick="select(2,2);"></div></td>
      <td><div id="t23" onclick="select(2,3);"></div></td>
      <td><div id="t24" onclick="select(2,4);"></div></td>
      <td><div id="t25" onclick="select(2,5);"></div></td>
      <td><div id="t26" onclick="select(2,6);"></div></td>
      <td><div id="t27" onclick="select(2,7);"></div></td>
      <td><div id="t28" onclick="select(2,8);"></div></td>
    </tr>
    <tr>
      <td><div id="t31" onclick="select(3,1);"></div></td>
      <td><div id="t32" onclick="select(3,2);"></div></td>
      <td><div id="t33" onclick="select(3,3);"></div></td>
      <td><div id="t34" onclick="select(3,4);"></div></td>
      <td><div id="t35" onclick="select(3,5);"></div></td>
      <td><div id="t36" onclick="select(3,6);"></div></td>
      <td><div id="t37" onclick="select(3,7);"></div></td>
      <td><div id="t38" onclick="select(3,8);"></div></td>
    </tr>
    <tr>
      <td><div id="t41" onclick="select(4,1);"></div></td>
      <td><div id="t42" onclick="select(4,2);"></div></td>
      <td><div id="t43" onclick="select(4,3);"></div></td>
      <td><div id="t44" onclick="select(4,4);"></div></td>
      <td><div id="t45" onclick="select(4,5);"></div></td>
      <td><div id="t46" onclick="select(4,6);"></div></td>
      <td><div id="t47" onclick="select(4,7);"></div></td>
      <td><div id="t48" onclick="select(4,8);"></div></td>
    </tr>
    <tr>
      <td><div id="t51" onclick="select(5,1);"></div></td>
      <td><div id="t52" onclick="select(5,2);"></div></td>
      <td><div id="t53" onclick="select(5,3);"></div></td>
      <td><div id="t54" onclick="select(5,4);"></div></td>
      <td><div id="t55" onclick="select(5,5);"></div></td>
      <td><div id="t56" onclick="select(5,6);"></div></td>
      <td><div id="t57" onclick="select(5,7);"></div></td>
      <td><div id="t58" onclick="select(5,8);"></div></td>
    </tr>
    <tr>
      <td><div id="t61" onclick="select(6,1);"></div></td>
      <td><div id="t62" onclick="select(6,2);"></div></td>
      <td><div id="t63" onclick="select(6,3);"></div></td>
      <td><div id="t64" onclick="select(6,4);"></div></td>
      <td><div id="t65" onclick="select(6,5);"></div></td>
      <td><div id="t66" onclick="select(6,6);"></div></td>
      <td><div id="t67" onclick="select(6,7);"></div></td>
      <td><div id="t68" onclick="select(6,8);"></div></td>
    </tr>
    <tr>
      <td><div id="t71" onclick="select(7,1);"></div></td> 
      <td><div id="t72" onclick="select(7,2);"></div></td>
      <td><div id="t73" onclick="select(7,3);"></div></td>
      <td><div id="t74" onclick="select(7,4);"></div></td>
      <td><div id="t75" onclick="select(7,5);"></div></td>
      <td><div id="t76" onclick="select(7,6);"></div></td>
      <td><div id="t77" onclick="select(7,7);"></div></td>
      <td><div id="t78" onclick="select(7,8);"></div></td>
    </tr>
    <tr>   
      <td><div id="t81" onclick="select(8,1);"></div></td>
      <td><div id="t82" onclick="select(8,2);"></div></td>
      <td><div id="t83" onclick="select(8,3);"></div></td>
      <td><div id="t84" onclick="select(8,4);"></div></td>
      <td><div id="t85" onclick="select(8,5);"></div></td>
      <td><div id="t86" onclick="select(8,6);"></div></td>
      <td><div id="t87" onclick="select(8,7);"></div></td>
      <td><div id="t88" onclick="select(8,8);"></div></td>
    </tr>
    </table>

До сих пор я вставлял некоторые значения с document.getElementById("t11").innerHTML = "P1";, но я хотел сделать это автоматически.

Спасибо за поддержку

...