Web-технологии

Исходный код этого примера:

<script type="text/javascript">
function createTable(){
	// создание таблицы
	var table = document.createElement("table");
	table.setAttribute("id", "the_table");
	table.setAttribute("bgcolor", "#FFFFFF");
	table.setAttribute("border", "1");
	table.setAttribute("cellpadding", "0");
	table.setAttribute("cellspacing", "0");
	// инициализация счетчика
	var count = 0;
	// показываем прогресс бар
	var bar = document.getElementById("bar");
	var progress_panel = document.getElementById("progress")
	progress_panel.style.display = "block";
	(function () {
	   var row = createRow(count);
	   table.appendChild(row);
	   if (count == 400) {
		// Таблица создана, добавляем её в документ
		var body = document.getElementsByTagName('body')[0];
		body.appendChild(table);
		// после добавления таблицы, прогресс бар можно спрятать
		progress_panel.style.display = 'none';
	   } else {
		// увеличиваем на 1 счетчик и изменяем прогресс бар
		bar.style.width = ++count + "px";
		// следующая итерация цикла
		setTimeout(arguments.callee, 0);
	   }
	})();
}
function createRow(count){
	var row = document.createElement("tr");
	row.className = "the_row";
	row.setAttribute("id", "row_number_"+count);
	for (var i=0; i<10; i++){
	   var cell = document.createElement("td");
	   cell.setAttribute("width", "10%");
	   cell.setAttribute("bgcolor", "#EEEEEE");
	   cell.setAttribute("align", "left");
	   cell.setAttribute("style", "font-size:10px;color:#333");
	   cell.className = "the_cell";
	   cell.setAttribute("id", "the_cell_"+count+"_"+i);
	   cell.appendChild(document.createTextNode("Строка: "+count+" Ячейка: "+i));
	   row.appendChild(cell);
	}
	return row;
}
window.onload = createTable;
</script>
<div id="progress" style="display:none">
    Выполняется создание таблицы:
    <div style="width:400px;border:1px solid #000">
	<div id="bar" style="background:#00f;height:10px;width:0px">
	</div>
    </div>
</div>
Скопировать в буфер