Вопросы Теги

Как я могу производить таблицу начиная с данных array?

я практикую какие-то упражнения языка сценариев 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]
2
задан 13.06.2019, 14:37
1 ответ

С 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>
0
ответ дан 25.10.2019, 05:59

Теги

Похожие вопросы