Вывод таблицы на элемент body через скрипт

276

19 декабря 2017, 19:57

Я новичек в програмиировании и в том числе в js и html. На курсе дали задание, и я не могу понять, как с ним справиться. В пустом html файле (не используя никаких тегов в body), с помощью скрипта вывести таблицу 3х3 с буквами внутри. Я могу сделать таблицу в body, но не понимаю, как вставить её в скрипт, и вывести на экран. Кто нибудь может объяснить или дать направление.

Вот код таблицы. Я приблизительно понимаю, что мне нужно использовать documents.body.innerHTML = ""; Но не понимаю как его использовать.

<table border=1 id="1">
    <tr> 
    <th> A </th>
    <th> B </th>
    <th> C </th>
</tr>
<tr> 
    <th> D </th>
    <th> E </th>
    <th> F </th>
</tr>
<tr> 
    <th> H </th>
    <th> I </th>
    <th> G </th>
</tr>

Answer 1

Ответ, на самом деле, может варьироваться от простого, до многострочного объяснения.

Простой вариант:

window.onload = function(){ 
 
    let template = `<table border=1 id="1"> 
        <tr>  
        <th> A </th> 
        <th> B </th> 
        <th> C </th> 
    </tr> 
    <tr>  
        <th> D </th> 
        <th> E </th> 
        <th> F </th> 
    </tr> 
    <tr>  
        <th> H </th> 
        <th> I </th> 
        <th> G </th> 
    </tr>`; 
 
    document.body.innerHTML = template; 
}

Скрипт в вставляется в тег head примерно так:

<head>
    <script>
        // Тут как раз скрипт
    </script>
</head>

Более сложные, тоже используя Javascript, но используя document.createElement, appendChild, append/prepend, before/after, replaceWith и другие методы работы с DOM

function tableCreate() { 
    var body = document.getElementsByTagName('body')[0]; 
    var tbl = document.createElement('table');    
    tbl.setAttribute('border', '1'); 
    var tbdy = document.createElement('tbody'); 
    var letterCount = 0; 
     
    for (var i = 0; i < 3; i++) { 
        var tr = document.createElement('tr'); 
        for (var j = 0; j < 3; j++) {             
            var td = document.createElement('td');                 
            var t = document.createTextNode(String.fromCharCode(65 + letterCount++)); 
             
            td.appendChild(t);              
            tr.appendChild(td)             
        } 
         
        tbdy.appendChild(tr); 
    } 
     
    tbl.appendChild(tbdy); 
    body.appendChild(tbl) 
} 
 
tableCreate();

td { 
  width: 50px; 
  height: 50px; 
  text-align: center; 
}

Answer 2

можно с помощью конкатенации чем и является в некоторых ситуациях оператор сложения плюс " + " и с использованием экранирования " \ "

<script> 
	document.body.innerHTML = "<table border=1 id=\"1\">" + 
	"<tr>" + 
		"<th> A </th>" + 
		"<th> B </th>" + 
		"<th> C </th>" + 
	"<\/table>" 
</script>

подключить скрипт можно двумя способами , либо прописать тег скрипт <script> cod </script> и в нем писать код либо подключить файл с расширением js указав до него путь

<script src="../../../home/desktop/main.js"></script>

вот более сложный вариант

<script> 
	var a = 'A' 
	var b = 'B' 
	var c = 'C' 
	 
	document.body.innerHTML = "<table border=1 id=\"1\">" + 
	"<tr>" + 
		"<th>" + a + "</th>" + 
		"<th>" + b + "</th>" + 
		"<th>" + c + "</th>" + 
	"<\/table>" 
</script>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

автоматизация загрузки шаблонов Handlebars

Доброго времени сутокВ поисках ответа на свой вопрос набрел на подобный способ

208

$Pause\Stop background video$

javascript

Pause\Stop background video

Есть кнопка, по клику на которую - я останавливаю фоновое видео, помогите дописать, чтобы на повторный клик, видео заново воспроизводилось

207

javascript

Почему classList.add не работает после clearInterval()

До того, как сработает clearInterval(), всё работает, но после прохождения цикла и очищения интервала, невозможно по новой добавить класс, чтобы замкнуть...

223

javascript

Прокрутка div главным скроллом браузера

Мне нужно сделать как здесь

159