Создание Javascript таблицы - PullRequest
Новая
       4

Создание Javascript таблицы

1 голос
/ 01 сентября 2010

Попытка создать таблицу, используя следующий код, но не работает.Пожалуйста, укажите, где я иду не так. 

var i,j;

function cell(ih){
    var tcell =document.createElement('td');
    tcell.innerHTML=ih;
    return tcell;
}

mutable=document.createElement('table');
for (i=0;i<10;i++){
    row1=document.createElement('tr');
    for(j=0;j<10;j++){
        row1.appendChild(cell(j));
    }
    mutable.appendChild(row1);
    document.write(mutable);
}

Ответы [ 4 ]

4 голосов
/ 01 сентября 2010

У вас есть несколько проблем, первые две - большие, вторые две - это вопрос стиля и риска столкновения с другим кодом:

  1. Вы пытаетесь document.write HTMLElementNode. document.write имеет дело только со строками. Возьмите элемент контейнера (например, с document.getElementById) и добавьте к нему
  2. Вы пытаетесь документировать всю таблицу каждый раз, когда добавляете в нее строку. Добавляйте таблицу после заполнения таблицы, а не каждый раз, когда вы проходите цикл.
  3. Вы используете глобалы повсюду, учитесь любить ключевое слово var
  4. row1 - плохое имя переменной для строки, с которой вы работаете, которая обычно не является первой
1 голос
/ 01 сентября 2010

Также обратите внимание, что в большинстве случаев в разметке вы не видите элемент <tbody>, но рекомендуется добавить его как дочерний элемент <table> и как родительский элемент для всех ваших строк.Итак, ваш сценарий должен выглядеть примерно так: 

function cell(ih){
    var tcell = document.createElement('td');
    tcell.innerHTML = ih; // I would suggest you use document.createTextNode(ih) instead
    return tcell;
}

function appendTable() { // you now have to call this function some time
    mutable = document.createElement("table");
    var tBody = mutable.appendChild( document.createElement("tbody") ); // technique using "fluid interfaces"
    for (var i = 0; i < 10; i++) {
        var row1 = tBody.appendChild( document.createElement('tr') ); // fluid interface call again
        for(var j = 0; j < 10; j++) {
            row1.appendChild(cell(j));
        }
    }
    document.body.appendChild(mutable);
}

Я внес в ваш сценарий некоторые изменения стиля и предложил бы сделать еще больше, но, насколько это правильно, он должен работать.

1 голос
/ 01 сентября 2010

Вы можете сделать это, изменив свой сценарий на использование document.body.appendChild(mutable) после вложенного цикла for: 

var i,j;

function cell(ih){
    var tcell =document.createElement('td');
    tcell.innerHTML=ih;
    return tcell;
}

mutable=document.createElement('table');
for (i=0;i<10;i++){
    row1=document.createElement('tr');
    for(j=0;j<10;j++){
        row1.appendChild(cell(j));
    }
    mutable.appendChild(row1);
}
document.body.appendChild(mutable);

Это добавляет весь созданный вами табличный объект mutable к элементу <body>вашей страницы.Вы можете видеть это , работающий здесь .

1 голос
/ 01 сентября 2010

Используйте document.body.appendChild(...) вместо document.write(...).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...