Javascript-форум - сделать таблицу.

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - сделать таблицу. (https://javascript.ru/forum/misc/35565-sdelat-tablicu.html)

dima***, ну сам подумай. Если одна табличка генерируется за 1-2мс, то 10штук - за 10-20мс. Ты моргнуть не успеешь за это время :)

<!DOCTYPE html>
<body>
<script>

function createTable() {
    var table, row, data;
     
    table = document.createElement('table');
    table.border = 1;
    for (var k = 0; k < 4; k++) {
        row = document.createElement('tr');
        for (var m = 0; m < 5; m++) {
            data = document.createElement('td');
            data.innerHTML = "строка " +k+"; яч "+m;
            if (k == m) {
                data.style.backgroundColor = 'red';
                //data.style.borderColor = 'red';
                //data.style.color = 'red';
            }
            row.appendChild(data);
        }
        table.appendChild(row);
    }
    document.body.appendChild(table);
}

function run() {
    var tstart = new Date();
    for (var i = 0; i < 10; i++) {
        createTable();
    }
    alert(new Date() - tstart);
}
</script>
<button onclick="run()">Запуск</button>
</body>

UPD: На моем Core i5 3210М (мобильный) 2.5ГГц Хром выдает 4мс. Попробую переделать скрипт:

<!DOCTYPE html>
<body>
<script>

function createTable( fragment ) {
    var table, row, data;
     
    table = document.createElement('table');
    table.border = 1;
    for (var k = 0; k < 4; k++) {
        row = document.createElement('tr');
        for (var m = 0; m < 5; m++) {
            data = document.createElement('td');
            data.innerHTML = "строка " +k+"; яч "+m;
            if (k == m) {
                data.style.backgroundColor = 'red';
                //data.style.borderColor = 'red';
                //data.style.color = 'red';
            }
            row.appendChild(data);
        }
        table.appendChild(row);
    }
    fragment.appendChild(table);
}

function run() {
    var tstart = new Date();
    var fragment = document.createDocumentFragment();
    for (var i = 0; i < 10; i++) {
        createTable(fragment);
    }
    document.body.appendChild(fragment);
    alert(new Date() - tstart);
}
</script>
<button onclick="run()">Запуск</button>
</body>

UPD2: разницы практически нет. А нука если не 10 а 1000 таблиц генерить:

<!DOCTYPE html>
<body>
<script>

function createTable() {
    var table, row, data;
     
    table = document.createElement('table');
    table.border = 1;
    for (var k = 0; k < 4; k++) {
        row = document.createElement('tr');
        for (var m = 0; m < 5; m++) {
            data = document.createElement('td');
            data.innerHTML = "строка " +k+"; яч "+m;
            if (k == m) {
                data.style.backgroundColor = 'red';
                //data.style.borderColor = 'red';
                //data.style.color = 'red';
            }
            row.appendChild(data);
        }
        table.appendChild(row);
    }
    document.body.appendChild(table);
}

function run() {
    var tstart = new Date();
    for (var i = 0; i < 1000; i++) {
        createTable();
    }
    alert(new Date() - tstart);
}
</script>
<button onclick="run()">Запуск</button>
</body>

<!DOCTYPE html>
<body>
<script>

function createTable( fragment ) {
    var table, row, data;
     
    table = document.createElement('table');
    table.border = 1;
    for (var k = 0; k < 4; k++) {
        row = document.createElement('tr');
        for (var m = 0; m < 5; m++) {
            data = document.createElement('td');
            data.innerHTML = "строка " +k+"; яч "+m;
            if (k == m) {
                data.style.backgroundColor = 'red';
                //data.style.borderColor = 'red';
                //data.style.color = 'red';
            }
            row.appendChild(data);
        }
        table.appendChild(row);
    }
    fragment.appendChild(table);
}

function run() {
    var tstart = new Date();
    var fragment = document.createDocumentFragment();
    for (var i = 0; i < 1000; i++) {
        createTable(fragment);
    }
    document.body.appendChild(fragment);
    alert(new Date() - tstart);
}
</script>
<button onclick="run()">Запуск</button>
</body>

UPD3: documentFragment тут роли не играет. Ок, добавлю для сравнения innerHTML на 1000 таблиц:

<!DOCTYPE html>
<body>
<script>

function createTable() {
    var strTabl="<table border=1><tbody>\n";
    for (var k = 0; k < 4; k++) {
        strTabl+= "\n<tr>\n";
        for (var m = 0; m < 5; m++) {
         strTabl+= "<td" + (k == m ? " style=color:red" : "") + ">"+"строка " +k+"; яч "+m+"</td>";
        }  strTabl+=  "\n</tr>\n";
    }
    strTabl+= "\n</tbody></table>";
    document.write(strTabl);
}

function run() {
    var tstart = new Date();
    for (var i = 0; i < 1000; i++) {
        createTable();
    }
    alert(new Date() - tstart);
}
</script>
<button onclick="run()">Запуск</button>
</body>

И еще улучшенный вариант innerHTML, самый быстрый:

<!DOCTYPE html>
<body>
<script>

var strTabl;
function createTable() {
    strTabl +="<table border=1><tbody>\n";
    for (var k = 0; k < 4; k++) {
        strTabl+= "\n<tr>\n";
        for (var m = 0; m < 5; m++) {
         strTabl+= "<td" + (k == m ? " style=color:red" : "") + ">"+"строка " +k+"; яч "+m+"</td>";
        }  strTabl+=  "\n</tr>\n";
    }
    strTabl+= "\n</tbody></table>";
}

function run() {
    var tstart = new Date();
    strTabl = '';
    for (var i = 0; i < 1000; i++) {
        createTable();
    }
    document.write(strTabl);
    alert(new Date() - tstart);
}
</script>
<button onclick="run()">Запуск</button>
</body>

Хах, че за хрень. Deff, не мог бы помочь разобраться? У меня выходит что innerHTML медленней (Google Chrome):

Три последние эксперимента:
190,
280,
280

То есть innerHTML оказывается даже медленней. Почему так?

Ничего себе!!!Теперь всё понятно!Спасибо за понятное объяснение.:)
Лист в "закладки"!!!

danik.js,
Не так выполняете - нужно последний тег - креaтить ( и внего в вставлять контекст, и только потом в DOM

<!DOCTYPE html>
<body>
<script>

var strTabl;
var div=document.createElement('div');
function createTable() {
    strTabl ="<tbody>\n";
    for (var k = 0; k < 4; k++) {
        strTabl+= "\n<tr>\n";
        for (var m = 0; m < 5; m++) {
         strTabl+= "<td" + (k == m ? " bgcolor=red" : "") + ">"+"строка " +k+"; яч "+m+"</td>";
        }  strTabl+=  "\n</tr>\n";
    }
    strTabl+= "\n</tbody>"
    var table=document.createElement('table');
    table.border='1';
    table.innerHTML = strTabl;
    div.appendChild(table);
}

function run() {

    var tstart = new Date();
    strTabl = '';
    for (var i = 0; i < 1000; i++) {
    createTable()
    }
    document.body.appendChild(div);
    alert(new Date() - tstart);
}
</script>
<button onclick="run()">Запуск</button>
</body>

Ок, что ты скажешь на это, Deff ? У меня второй пример работает немного быстрее.

<!DOCTYPE html>
<body>
<script>
 
var strTabl;
var div=document.createElement('div');
function createTable() {
    strTabl ="<tbody>\n";
    for (var k = 0; k < 4; k++) {
        strTabl+= "\n<tr>\n";
        for (var m = 0; m < 5; m++) {
         strTabl+= "<td" + (k == m ? " bgcolor=red" : "") + ">"+"строка " +k+"; яч "+m+"</td>";
        }  strTabl+=  "\n</tr>\n";
    }
    strTabl+= "\n</tbody>"
    var table=document.createElement('table');
    table.border='1';
    table.innerHTML = strTabl;
    div.appendChild(table);
}
 
function run() {
 
    var tstart = new Date();
    strTabl = '';
    for (var i = 0; i < 10000; i++) {
    createTable()
    }
    document.body.appendChild(div);
    alert(new Date() - tstart);
}
</script>
<button onclick="run()">Запуск</button>
</body>

<!DOCTYPE html>
<body>
<script>

var div=document.createElement('div');
var textProp = ('innerText' in div) ? 'innerText' : 'textContent';
function createTable() {
    var table, row, data;
      
    table = document.createElement('table');
    table.border = 1;
    for (var k = 0; k < 4; k++) {
        row = document.createElement('tr');
        for (var m = 0; m < 5; m++) {
            data = document.createElement('td');
            data[textProp]= "строка " +k+"; яч "+m;
            if (k == m) {
                data.style.backgroundColor = 'red';
                //data.style.borderColor = 'red';
                //data.style.color = 'red';
            }
            row.appendChild(data);
        }
        table.appendChild(row);
    }
    div.appendChild(table);
}
 
function run() {
    var tstart = new Date();
    for (var i = 0; i < 10000; i++) {
        createTable();
    }
    document.body.appendChild(div);
    alert(new Date() - tstart);
}
</script>
<button onclick="run()">Запуск</button>
</body>

Вариант...

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
  <title></title>
</head>
<body>
<script>
function createTable( fragment ) {
    var table, row, data;
    table = document.createElement('table');
    table.border = 1;
    for (var k = 0; k < 4; k++) {
        row = table.insertRow(k);
        for (var m = 0; m < 5; m++) {
            data = row.insertCell(m);
            data.textContent  = "строка " +k+"; яч "+m;
            if (k == m) {
                data.style.backgroundColor = 'red';
                //data.style.borderColor = 'red';
                //data.style.color = 'red';
            }
            row.appendChild(data);
        }
        table.appendChild(row);
    }
    return table;
}

function run() {
    var tstart = new Date();
    var fragment = document.createDocumentFragment();
    for (var i = 0; i < 10000; i++) {
        fragment.appendChild(createTable());
    }
    document.body.appendChild(fragment);
    alert(new Date() - tstart);
}
</script>
<button onclick="run()">Запуск</button>
</body>
</html>

danik.js,
В Опере = 1-й 1456 2-й 1945
Мозилла 1317 1999
Хром 1332 1752
(*Перезапуск делал по кнопке посмотреть это данные для поста 46

Да, я уже потестил. В хроме dom-методы работают быстрее чем парсинг html. В остальных браузерах парсинг происходит быстрее. Но не в разы как я предполагал. В два или менее раз. Поправил свой тест, там была идиотская ошибка.
Кстати innerText в хроме быстрее чем textContent (не помню - на запись или на чтение тестил)

Deff, в ИЕ8 не работает вариант с innerHTML. В нем же вроде какие-то траблы с innerHTML у таблиц?

Для поста 45 и 47
в Хроме 182 и 142 - Ваш быстрее
Короче по любому если креатить тег перед запихиваием в DOM
элементы внутри отрытого тега по браузерам втискивать тестовой нодой чуть быстрее, кроме Хрома