я практикую какие-то упражнения языка сценариев JavaScript и столкнулся с проблемой.
Прямо сейчас у меня есть array с некими словами, которые я хочу использовать, чтобы производить таблицу HTML с языка сценариев JavaScript. Однако, каждый раз, когда я это пробую, или он дает мне ошибку или у меня выходит что-то, что не является тем, что он искал.
Давайте предполагать, что у меня есть array со следующими словами: "велосипедный спорт, плавание, гастрономия, теннис, баскетбол, футбол, кино, технология, туризм, политика".
Ну вот, начиная с этого array я хочу произвести таблицу с 10 линиями (которая является суммой элементов выражения array). Я знаю, что возможно делать посредством DOM или посредством document.write
. В этом случае, я пробую делать это с document.write
и цикл for
.
Результат, который я ищу, - что-то подобное:
AFICIONES
array[0]
array[1]
array[2]
array[3]
array[4]
array[5]
array[6]
array[7]
array[8]
array[9]
С JavaScript
ты можешь использовать метод onload
.
Код прокомментирован.
function crearTabla() {
var aficiones = ['ciclismo', 'natación', 'gastronomía', 'tenis', 'baloncesto', 'fútbol', 'cine', 'tecnología', 'turismo', 'política'];
var numeroFilas = aficiones.length;
// Obtener la referencia del elemento body
var body = document.getElementsByTagName("body")[0];
// Crea un elemento <table> y un elemento <tbody>
var tabla = document.createElement("table");
var tblBody = document.createElement("tbody");
// Crea las celdas
for (var i = 0; i < numeroFilas; i++) {
// Crea las filas de la tabla
var fila = document.createElement("tr");
// Cambia el 1 por el número de columnas que requieras
for (var j = 0; j < 1; j++) {
// Crea un elemento <td> y un nodo de texto, haz que el nodo de
// texto sea el contenido de <td>, ubica el elemento <td> al final
// de la fila de la tabla
var celda = document.createElement("td");
var textoCelda = document.createTextNode(aficiones[i]);
celda.appendChild(textoCelda);
fila.appendChild(celda);
}
// agrega la hilera al final de la tabla (al final del elemento tblbody)
tblBody.appendChild(fila);
}
// posiciona el <tbody> debajo del elemento <table>
tabla.appendChild(tblBody);
// appends <table> into <body>
body.appendChild(tabla);
// modifica el atributo "border" de la tabla y lo fija a "2";
tabla.setAttribute("border", 2);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body onload="crearTabla()">
</body>
</html>