Невозможно прочитать свойство «appendchild» null в For-Loop

У меня есть небольшая база данных, в которой я извлекал данные и сохранял их в таблице HTML.Невозможно прочитать свойство «appendchild» null в For-Loop

Эта таблица содержит 3 колонки и 3 строки.

Что я хочу сделать - через javascript создать div для каждой строки, тогда внутри этого создайте div для каждой ячейки в этой строке таблицы (чтобы разрешить стиль в CSS).

Я создал несколько циклов For, чтобы пройти и попытаться сделать это, моя проблема - это второй цикл, который я создал, он проходит один раз, и я получаю сообщение об ошибке «Can not read property» appendChild «null» , Я не уверен, почему он это делает. Любая помощь будет оценена по достоинству.

var getTable = document.getElementById('projectsTable'); 

var rowLength = getTable.rows.length; 

for (i =0; i< rowLength; i++) { 
    var divName = 'projects' + i; 
    block = document.createElement('div'); 
    block.id = divName; 
    document.getElementById('javascript').appendChild(block); 


    var getCells = getTable.rows.item(i).cells; 

    var cellLength = getCells.length; 

    for (var j = 0; j < cellLength; j++) { 
     var divName2 = 'projects' + j; 
     var projectInfo = 'info' + j; 
     info = document.createElement('div'); 
     info.id = projectInfo; 
     document.getElementById(divName2).appendChild(info); 


     var cellVal = getCells.item(j).innerHTML; 
     var getDiv = document.getElementById(projectInfo); 
     getDiv.innerHTML = cellVal; 

    } 

}

Первый цикл создает DIV для всей строки и присоединяет его к DIV на странице, которая уже существует, то я получаю ошибку на 2-й цикл.

источник

2015-05-29 UniqueName

Не было block.appendChild (info); будь проще? Поскольку block - ваш document.getElementById (divName2). Во всяком случае, это не работает, потому что var divName2 = 'projects' + j; должен быть var divName2 = 'projects' + i; – Lain

В зависимости от номера строки либо document.getElementById ('javascript'), либо document.getElementById (divName2) возвращает значение null. Вы должны быть в состоянии сказать, что через отладчик. – Brian

Меняя это, я не буду работать. Это будет означать, что каждая строка будет помещена в один и тот же div вместо создания новых. – UniqueName

Вы используете много ненужных переменных и определений. Например, divName2 должен быть таким же, как divName и, следовательно, избыточным. Надеюсь, этот пример поможет вам.

<!DOCTYPE html> 
<html> 
    <head> 
     <script> 
      function loadTable(){ 
       var tT = document.getElementById('projectsTable'); //Source table 
       var tJ = document.getElementById('javascript'); //New clone container 
       if (tT && tJ){ 
        for(var i=0, j=tT.rows.length;i<j;i++){ 
         var tP = document.createElement('div'); //Our project div(:=tr) 
         tP.id = 'projects' + i.toString(); 

         for(k=0, l=tT.rows.item(i).cells.length;k<l;k++){ 
          var tI = document.createElement('div'); //Our info div(:=td) 
          tI.id = 'info' + k.toString(); 
          tI.innerHTML = (i+1)*k; 
          tP.appendChild(tI); //We still have the correct project from above, so we just use it. 
         }; 

         tJ.appendChild(tP); //Adding project to the dom 
        }; 
       }; 
      }; 
     </script> 
    </head> 

    <body onload = 'loadTable();'> 
     <table id = 'projectsTable'> 
      <tr><td>1</td><td>2</td><td>3</td></tr> 
      <tr><td>4</td><td>5</td><td>6</td></tr> 
     </table> 

     <div id = 'javascript'></div> 
    </body> 
</html>

источник

2015-05-29 14:41:41 Lain

Спасибо, что исправляет петлю отлично! Однако я немного потеряю, как фактически получить значения из каждой ячейки. Я не вижу, как теперь устанавливается параметр InnerHTML с фактической таблицей. – UniqueName

Измените пример tI.innerHTML с этим tI.innerHTML = tT.rows.item (i) .cells [k] .innerHTML; – Lain

Вам нужна дополнительная помощь? – Lain

Невозможно прочитать свойство «appendchild» null в For-Loop

ответ

Смежные вопросы