Как сделать динамическую таблицу/матрицу JavaScript?

Question

[unStaiL]

Есть такой код:

<form>
	<input type="text" id="cols" value=""/>Строки<br />
	<input type="text" id="rows" value=""/>Столбцы
	<input type="button" value="GO" onclick="go()">
</form>
<SCRIPT>
var cols = document.getElementById('cols').value;
var rows = document.getElementById('rows').value;
 
 function rowscalc (i, r) {
		for (var k = 1, z = ''; k <= r; k++)
			{  z += '<td style="width: 50px;">' + i +','+ k + '</td>';} 
			return z;
			}
function go() {
	document.write ('<table border="1", cellpadding="0", cellspacing="0">');
	for (var i = 1; i <= cols; i++)
	{
		document.write ('<tr>' + rowscalc (i, rows) + '</tr>');
	}
	document.write ('</table>');
}
</SCRIPT>

Все вроде бы работает. Но когда нажимаю кнопку GO то весь контент стирается и в чистом окне, в том же документе рисуется таблица. А нужно что бы она рисовалась сразу под формой ввода.
ЧЯДНТ ? :)

Answer 1

[Push Pull]

document.write же и очищает
вам надо сделать через document.createElement('{{tag}}')
и через appendChild "цеплять" элементы в конец.
разберитесь с appendChild и createElement и будет вам хорошо

Answer 2

[Александр Хиренко]

Очень советую Вам в таких случаях использовать documentFragment

Answer 3

[Александр Таратин]

www.w3schools.com/jsref/met_table_insertrow.asp
viralpatel.net/blogs/dynamically-add-remove-rows-i...