JavaScript Loop Inside HTML Table Не работает

62
4

У меня есть назначение JavaScript, и часть этого назначения имеет таблицу с двумя столбцами со встроенным JavaScript, которая проходит через 50 температур в градусах Цельсия и Фаренгейта.

Я проверил W3 HTML validator, и он сообщает мне, что до сих пор у меня есть 2 ошибки... Тот, с которым я никогда не избавлюсь, - это "Скрипт элемента, который не разрешен как дочерний элемент tbody в этом контексте".

И это мой код:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<style type="text/css">
body { background-image:url('background.png'); text-align:center; font-family:verdana; color:white; }

ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
li
{
display:inline;
}

a:link,a:visited
{
opacity:0.75;
filter:alpha(opacity=75);
font-weight:bold;
color:#FFFFFF;
background-color:#999999;
text-align:center;
padding:5px;
text-decoration:none;
text-transform:uppercase;
border: 1px solid white;
font-weight:bold;
}

a:hover,a:active
{
opacity:1;
filter:alpha(opacity=100);
background-color:#999999;
border: 1px solid white;
font-weight:bold;
}

h1 { font-size: 25px; }
h2 { font-size: 12px; }
h3 { font-size: 10px; position:fixed; bottom: 5px; left:0%; right:0%; font-weight:normal; }
h4 { font-size: 25px; text-transform:uppercase; }

navigationtext { font-weight:bold; text-transform:uppercase; }

</style>
<head>
<title>Untitled Document</title>
</head>
<body>
<table>
<tr><td>Celsius</td><td>Fahrenheit</td></tr>
<script type="text/javascript" src="temperatures.js"></script>
</table>
</body>
</html>

И вот внешний файл JavaScript:

var celsius = 0;
for (celsius = 0; celsius <= 50; celsius) {
document.write("<tr><td>"+celsius+"</td><td>"+((celsius*9/5)+32)+"</td</tr>");
celsius++;
}

спросил(а) 2021-01-25T12:29:51+03:00 4 месяца, 2 недели назад
1
Решение
64

Прежде всего, получите этот script до нижней части body, прямо перед </body>. Помещение в другое место блокирует загрузку страницы. Адаптируйте свой HTML для правильной манипуляции с DOM, указав идентификаторы на элементы, которые вы собираетесь манипулировать:

<table>
<thead>
<tr><th>Celsius</th><th>Fahrenheit</th></tr>
</thead>
<tbody id="temperatureTableTbody"></tbody>
</table>
<script type="text/javascript" src="temperatures.js"></script>
</body>

Также сделайте закрытие, чтобы не загрязнять глобальную область с помощью ненужных переменных. Я немного изменил ваш код, чтобы использовать правильные манипуляции с DOM, должен работать в любом браузере, выпущенном в последнее десятилетие.

(function() { //creates a closure, so vars don't leak in the global scope
//stores a reference to the tbody DOM element which we will append rows to
var tbody = document.getElementById('temperatureTableTbody');
//iterates celsius from 0 to 50
for (var celsius = 0; celsius <= 50; celsius++) {
//creates elements
var tr = document.createElement('tr'),
tdcelsius = document.createElement('td'),
tdfahr = document.createElement('td');
//append textNodes to the td elements
tdcelsius.appendChild(document.createTextNode(celsius));
tdfahr.appendChild(document.createTextNode((celsius*9/5)+32));
//appends the tds to the tr
tr.appendChild(tdcelsius);
tr.appendChild(tdfahr);
//append the finished row to the tbody
tbody.appendChild(tr);
//repeat loop while condition is true
}
}());​ //closes the Immediately Invoked Function Expression

скрипка

И, пожалуйста, не используйте document.write.

Некоторая ссылка: Почему document.write считается "плохой практикой"?

ответил(а) 2021-01-25T12:29:51+03:00 4 месяца, 2 недели назад
45

Попробуй вот так.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
</head>
<body>
<table>
<tr>
<td>Celsius</td>
<td>Fahrenheit</td>
</tr>
<script type="text/javascript" > //<![CDATA[
for (var celsius = 0; celsius <= 50; celsius++) {
document.write("<tr><td>"+ celsius +"</td>");
document.write("<td>"+ ((celsius*9/5)+32) +"</td></tr>");
}
//]]></script>
</table>
</body>
</html>

ответил(а) 2021-01-25T12:29:51+03:00 4 месяца, 2 недели назад
46

Вы должны вызвать функцию javascript при загрузке документа:

if (document.readyState === "complete") { loadTemperatures(); }

Функция loadTemperatures добавит строки в таблицу. Посмотрите здесь, чтобы узнать, как это сделать: http://viralpatel.net/blogs/dynamically-add-remove-rows-in-html-table-using-javascript/

Скрипт элемента не разрешен как дочерний элемент элемента tbody в этом контексте

Поместите балансировку <script> между <head> и </head> чтобы исправить это.

Вот jsFiddle, чтобы показать вам цель: http://jsfiddle.net/dfTz6/2/

ответил(а) 2021-01-25T12:29:51+03:00 4 месяца, 2 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема