Использование 2-мерного массива для заполнения таблицы Javascript

Question

Я новичок в JavaScript и все еще выясняю, как все общается, поэтому я извиняюсь, если это очевидно. В конечном итоге я пытаюсь создать головоломку с раздвижной плиточкой, но на данный момент мне нужно создать 2-мерный массив, который заполнит мою сетку значениями (1-8). В основном вся моя информация до сих пор была собрана из интернет-поиска, так как мои другие ресурсы оказались довольно бесполезными.

Вот мой код, который генерирует сетку:

function newPuzzle(r, c) 
{ 
    var table = document.createElement("table"); 

    for (var i = 0; i < r; i++) 
    { 
     var row = document.createElement('tr'); 
     for (var j = 0; j < c; j++) 
     { 
     var column = document.createElement('td'); 

     if (i%2 == j%2) 
     { 
       column.className = "even"; 
     } 
     else 
     { 
       column.className = "odd"; 
     }  
     row.appendChild(column);  
     } 
     table.appendChild(row); 
    } 
    document.body.appendChild(table); 

    populateTable(); 
} 

В конце я назвал функцию populateTable() (который я даже не уверен, что будет работать), а вот код для этого :

function populateTable() 
{ 

    var cell = new Array(_r); 
    for (var i = 0; i < _r; i++) 
    { 
     cell[i] = new Array(_c); 
    } 

    for (var i = 0; i < cell.length; ++i) 
    { 
     var entry = cell[i]; 
     for (var j = 0; j < entry.length; ++j) 
     { 
      var gridTable = document.getElementByTagName("table"); 
      var _cells = gridTable.rows[i].cells[j].innerHTML = "2"; 
      //the 2 is just for testing 
     } 

    } 
} 

Любое понимание было бы очень оценено.

Answer 1

Ваш код в основном было два вопроса, когда я побежал:

1. В вашем методе populateTable() переменные _r и _c не были определены, так что я передал их в качестве аргументов.

2. Метод document.getElementByTagName не существует, это множественное число document.getElementsByTagName в свою очередь, возвращает массив всех <table> элементов, так что вы должны выбрать, какой вы хотите - я выбрал для первого, так как я предполагаю, что у вас есть только одна таблица на твоя страница.

Вот изменения:

function newPuzzle(r, c) 
{ 
    var table = document.createElement("table"); 

    for (var i = 0; i < r; i++) 
    { 
     var row = document.createElement('tr'); 
     for (var j = 0; j < c; j++) 
     { 
     var column = document.createElement('td'); 

     if (i%2 == j%2) 
     { 
       column.className = "even"; 
     } 
     else 
     { 
       column.className = "odd"; 
     }  
     row.appendChild(column);  
     } 
     table.appendChild(row); 
    } 
    document.body.appendChild(table); 
    // here we pass _r and _c as arguments 
    populateTable(r,c); 
} 

function populateTable(_r,_c) 
{ 

    var cell = new Array(_r); 
    for (var i = 0; i < _r; i++) 
    { 
     cell[i] = new Array(_c); 
    } 

    for (var i = 0; i < cell.length; ++i) 
    { 
     var entry = cell[i]; 
     for (var j = 0; j < entry.length; ++j) 
     { 
      // getElementsByTagName returns an array of all table elements 
      var gridTable = document.getElementsByTagName("table"); 

      // we select the first table element with the array index [0] 
      var _cells = gridTable[0].rows[i].cells[j].innerHTML = "2"; 
      //the 2 is just for testing 
     } 
    } 
} 

интерактивный JS скрипку: https://jsfiddle.net/Ls76kk2a/2/

наконечника оптимизации: Дайте ваш стол уникальный идентификатор, как это:

var table = document.createElement("table"); 
table.id = "mySuperCoolTable"; 

Тогда вы можете быть уверены, что получите правильный вариант:

var gridTable = document.getElementById("mySuperCoolTable"); 

Это возвращает только одну (или ни одну) таблицу, поскольку идентификатор должен быть уникальным.

Ответ на ваш комментарий:

Вот пример, как заполнить все элементы кроме последнего:

function populateTable(_r,_c) 
{ 

    var cell = new Array(_r); 
    for (var i = 0; i < _r; i++) 
    { 
     cell[i] = new Array(_c); 
     for (var j = 0; j < _c; j++) { 
     cell[i][j] = i*_c + j; 
     } 
    } 

    // fix the last one 
    cell[_r-1][_c-1] = "X"; 

    for (var i = 0; i < cell.length; ++i) 
    { 
     var entry = cell[i]; 
     for (var j = 0; j < entry.length; ++j) 
     { 
      var gridTable = document.getElementsByTagName("table"); 
      var _cells = gridTable[0].rows[i].cells[j].innerHTML = cell[i][j]; 
     } 
    } 
} 

И вот JS скрипку: https://jsfiddle.net/Ls76kk2a/3/