петля по ячейкам таблицы html с помощью javascript

Я изо всех сил пытаюсь сделать петлю по ячейкам таблицы и вставить в них значения.Но я не знаю, что не так с моим кодом.Пожалуйста, помогите мне.Я знаю, что это какая-то глупая ошибка.Пожалуйста, дайте мне знать, что это.
Вот мой код-

 var data = response.datas.length;
              var table = document.getElementById('itemsval');
              for(var i=0; i<data; i++ ){
                var row = table.insertRow(i);
                for(var j=0; j<7; j++){
                 var cell = row.insertCell(j);


                cell[i][j].innerHTML = response.datas[i].p_name;
                 cell[i][j].innerHTML = response.datas[i].p_details;
                 cell[i][j].innerHTML = response.datas[i].p_qty;
                 cell[i][j].innerHTML = response.datas[i].p_rate;
                 cell[i][j].innerHTML = response.datas[i].p_dis;
                 cell[i][j].innerHTML = response.datas[i].p_tax;
                 cell[i][j].innerHTML = response.datas[i].p_tot; 
                }

              }

Я продолжаю получать ошибку-не могу прочитать свойство’ 0 ‘ undefined

Спасибо заранее.

1 ответ

  1. На первой итерации эта строка

    cell[i][j].innerHTML = response.datas[i].p_name;
    

    пытается получить доступ к свойству, вызванному 0внутри cell. cellне будет вызвано свойство 0(из переменнойi). Если бы это было так, то значение этого свойства также не имело бы свойства с именем 0(из переменнойj).

    Отдельно повторяется запись в одно и то же место:

    cell[i][j].innerHTML = response.datas[i].p_name;
    cell[i][j].innerHTML = response.datas[i].p_details;
    

    …приведет к перезаписи более поздних значений.

    Вместо этого вы хотите добавить ячейку в строку по ходу и задать содержимое этой ячейки. Давайте дадим себе удобную функцию, чтобы сделать это:

    function addCell(row, content) {
        var cell = row.insertCell();
        cell.appendChild(
            document.createTextNode(content)
        );
        return cell;
    }
    

    Он добавляет ячейку, задает ее содержимое таким образом, чтобы вам не приходилось беспокоиться о HTML-разметке, и возвращает ячейку.

    Теперь давайте использовать его в коде:

    // Get the table
    var table = document.getElementById('itemsval');
    
    // Add the rows
    response.datas.forEach(function(entry) {
        var row = table.insertRow();
        addCell(row, entry.p_name);
        addCell(row, entry.p_details);
        addCell(row, entry.p_qty);
        addCell(row, entry.p_rate);
        addCell(row, entry.p_dis);
        addCell(row, entry.p_tax);
        addCell(row, entry.p_tot); 
    });
    

    Обратите внимание, как этот код проходит через response.datasмассив via Array#forEach. У вас есть много других вариантов (это также мой ответ) , но это кажется самым простым в этом случае.