Динамическое создание Таблицы и вывод в Div
Разрабатываю Звездную карту из БД, хочу построить ее в ячейках таблицы, динамическим выводом , не могу разобраться возможно ли сделать динамический вывод в определенный див , если делаю 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>"); }) |
Используйте функции DOM
document.createElement https://developer.mozilla.org/ru/doc....createElement appenChild и append https://developer.mozilla.org/ru/doc...de/appendChild https://developer.mozilla.org/ru/doc...entNode/append В крайнем случае задавайте html текст через innerHTML https://developer.mozilla.org/ru/doc...ment/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>
|
Юрий123456,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
| Часовой пояс GMT +3, время: 04:17. |