-1
votes

Comment créer et remplir une table HTML à l'aide de JavaScript

|  Name | Age | Color | Month |
| name1 | 21  | green |   1   |
| name2 | 18  | blue  |   6   |
| name3 | 19  |yellow |   4   |

javascript html html-table

1 commentaires

Pourquoi ne pas utiliser A pour boucle puis et accéder aux valeurs de la matrice via le comptoir?

6 Réponses :

0
votes

Simplifiez en mappant en mappage sur un tableau, puis utilisez le modèle pour sortir.

Vous pouvez ranger le code HTML à partir de cet exemple. p>

<div>|  Name | Age | Color | Month |<div>
<div class="content"></div>

0 commentaires

0
votes

Vous pouvez récupérer les données par l'indice d'itération.

<div id="table" class="row clearfix">
</div>

0 commentaires

1
votes

J'ai eu le même problème il y a un moment. Vous pouvez utiliser cette fonction pour créer cette table de manière dynamique. Tout ce que vous avez à faire est de transmettre un tableau 2D à la fonction et cela le créera.

const data = [
["Name","Age"],
["Adam", 21],
["Samy", 28]
]
function tableCreate(data){
    var body = document.body,//Change the body element to the element that you want the table to be inserted into
        tbl  = document.createElement('table');
    tbl.style.width  = '100px';
    tbl.style.border = '1px solid black';

    for(var i = 0; i < data.length; i++){
        var tr = tbl.insertRow();
        for(var j = 0; j < data[i].length; j++){
                var td = tr.insertCell();
                td.appendChild(document.createTextNode(data[i][j]));
                td.style.border = '1px solid black';

            
        }
    }
    body.appendChild(tbl);
}

tableCreate(data);

0 commentaires

1
votes

Voici sur Ony Way d'insérer la table dans html code> via javascript code>. Juste itérer sur les tableaux et créer des éléments HTML avec les données requises.

p>



<div id="table" class="row clearfix"></div>

0 commentaires

0
votes

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>


      <div id="table" class="col-sm-12">
        <div class="row">
          <div class="col-sm-3">Name</div>
          <div class="col-sm-3">Age</div>
          <div class="col-sm-3">Color</div>
          <div class="col-sm-3">Month</div>
        </div>
      </div>

0 commentaires

0
votes

Utilisez TABLE.CREATREADEADeAreadhead Code> Pour créer THEAD> CODE>. LI>
Utilisez INSERTROW (index) code> pour créer tr> code>. LI>
Utilisez insertcell (index) code> pour créer td> code>. li> p> #table, #table td, #table th { border: 1px solid; }

0 commentaires