Динамическое создание Таблицы и вывод в Div [Архив форума]

Просмотр полной версии : Динамическое создание Таблицы и вывод в Div

Юрий123456

27.01.2021, 14:04

Разрабатываю Звездную карту из БД, хочу построить ее в ячейках таблицы, динамическим выводом , не могу разобраться возможно ли сделать динамический вывод в определенный див , если делаю document.write - то создает на чистой страницы , так не годиться.
Спасибо.
Пробовал сделать построение так не работает..

let as123 = document.getElementById("tableKK")
var cols = 3;
var rows = 3;
cols = parseInt(cols);
rows = parseInt(rows);
if (cols<1 || rows <1) {
cols = 1;
rows = 1;
}
as123.write(' <table border=1, cellpadding=2, cellspacing=0, width="90%">');
for (i = 0; i <= cols; i++)
{
as123.write("<tr>");
for (k = 0; k <= rows; k++)
{

if (k == 0) {
as123.write('<td style="background-color:orange">');
as123.write(i);

}
else
if (i == 0) {
as123.write('<td style="background-color:orange">');
as123.write(k);

}
else {
as123.write('<td style="background-color:silver">');
as123.write(i * k);

}

as123.write("</td>");
}

as123.write("</tr>");
}
as123.write("</table>");

})

voraa

27.01.2021, 14:29

Используйте функции DOM

document.createElement
https://developer.mozilla.org/ru/docs/DOM/document.createElement

appenChild и append
https://developer.mozilla.org/ru/docs/Web/API/Node/appendChild
https://developer.mozilla.org/ru/docs/Web/API/ParentNode/append

В крайнем случае задавайте html текст через innerHTML
https://developer.mozilla.org/ru/docs/Web/API/Element/innerHTML

Используя createElement это делается как то так

<head>
<style>
th {
background-color: orange;
}
td {
background-color: silver;
}
table {
width:90%;
border: blue 1px solid;
}
</style>
</head>
<body>
<div id=tableKK>
</div>

<script>
let cols = 3;
let rows = 3;
let tb = document.createElement('table');
for (let nr = 0; nr<rows; nr++) {
let row = document.createElement('tr')
for (let nc = 0; nc<cols; nc++) {
let cell = document.createElement((nr==0 || nc==0)? 'th' : 'td')
cell.textContent = '' + nr + ', ' + nc;
row.append(cell);
}
tb.append(row);
}
document.getElementById("tableKK").append(tb);
</script>
</body>

рони

27.01.2021, 14:42

Юрий123456,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

... минимальный код страницы с вашей проблемой

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.