Créer un tableau en utilisant Javascript

Question

Créer un tableau en utilisant Javascript

Demandé el 1 de Février, 2013: Quand la question a-t-elle été
684072 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai une fonction JavaScript qui crée un tableau avec 3 rangées et 2 cellules.

Quelqu'un peut-il me dire comment créer le tableau ci-dessous à l'aide de ma fonction (j'ai besoin de le faire pour ma situation) ?

Voici mon code javascript et html donné ci-dessous :

function tableCreate() {
  //body reference 
  var body = document.getElementsByTagName("body")[0];

  // create elements <table> and a <tbody>
  var tbl = document.createElement("table");
  var tblBody = document.createElement("tbody");

  // cells creation
  for (var j = 0; j <= 2; j++) {
    // table row creation
    var row = document.createElement("tr");

    for (var i = 0; i < 2; i++) {
      // create element <td> and text node 
      //Make text node the contents of <td> element
      // put <td> at end of the table row
      var cell = document.createElement("td");
      var cellText = document.createTextNode("cell is row " + j + ", column " + i);

      cell.appendChild(cellText);
      row.appendChild(cell);
    }

    //row added to end of table body
    tblBody.appendChild(row);
  }

  // append the <tbody> inside the <table>
  tbl.appendChild(tblBody);
  // put <table> in the <body>
  body.appendChild(tbl);
  // tbl border attribute to 
  tbl.setAttribute("border", "2");
}

<table width="100%" border="1">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td rowspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

Demandé el 1 de Février, 2013 par Manny Fitzgerald

Answer 1

5 Réponses

Answer 2

157voto

Cerbrus Points 20704

Un code un peu plus court utilisant insertRow y insertCell :

function tableCreate() {
  const body = document.body,
        tbl = document.createElement('table');
  tbl.style.width = '100px';
  tbl.style.border = '1px solid black';

  for (let i = 0; i < 3; i++) {
    const tr = tbl.insertRow();
    for (let j = 0; j < 2; j++) {
      if (i === 2 && j === 1) {
        break;
      } else {
        const td = tr.insertCell();
        td.appendChild(document.createTextNode(`Cell I${i}/J${j}`));
        td.style.border = '1px solid black';
        if (i === 1 && j === 1) {
          td.setAttribute('rowSpan', '2');
        }
      }
    }
  }
  body.appendChild(tbl);
}

tableCreate();

De plus, cette méthode n'utilise pas certaines "mauvaises pratiques", telles que la mise en place d'un système de contrôle de la qualité. border au lieu d'utiliser le CSS, et il accède à l'attribut body par le biais de document.body au lieu de document.getElementsByTagName('body')[0] ;

Répondu el 1 de Février, 2013 par Cerbrus (20704 Points )

Answer 3

128voto

Craig Taub Points 2541

Cela devrait fonctionner (à partir de quelques modifications apportées à votre code ci-dessus).

function tableCreate() {
  var body = document.getElementsByTagName('body')[0];
  var tbl = document.createElement('table');
  tbl.style.width = '100%';
  tbl.setAttribute('border', '1');
  var tbdy = document.createElement('tbody');
  for (var i = 0; i < 3; i++) {
    var tr = document.createElement('tr');
    for (var j = 0; j < 2; j++) {
      if (i == 2 && j == 1) {
        break
      } else {
        var td = document.createElement('td');
        td.appendChild(document.createTextNode('\u0020'))
        i == 1 && j == 1 ? td.setAttribute('rowSpan', '2') : null;
        tr.appendChild(td)
      }
    }
    tbdy.appendChild(tr);
  }
  tbl.appendChild(tbdy);
  body.appendChild(tbl)
}
tableCreate();

Répondu el 1 de Février, 2013 par Craig Taub (2541 Points )

Answer 4

22voto

Nitin Pawar Points 573

function addTable() {
  var myTableDiv = document.getElementById("myDynamicTable");

  var table = document.createElement('TABLE');
  table.border = '1';

  var tableBody = document.createElement('TBODY');
  table.appendChild(tableBody);

  for (var i = 0; i < 3; i++) {
    var tr = document.createElement('TR');
    tableBody.appendChild(tr);

    for (var j = 0; j < 4; j++) {
      var td = document.createElement('TD');
      td.width = '75';
      td.appendChild(document.createTextNode("Cell " + i + "," + j));
      tr.appendChild(td);
    }
  }
  myTableDiv.appendChild(table);
}
addTable();

<div id="myDynamicTable"></div>

Répondu el 3 de Juin, 2015 par Nitin Pawar (573 Points )

Answer 5

13voto

Sanan Ali Points 158

Voici la dernière méthode utilisant le .map en javascript. Vous créez un tableau en html et ensuite vous insérez le corps avec javascript.

const data = [{Name:'Sydney', Day: 'Monday', Time: '10:00AM'},{Name:'New York', Day: 'Monday',Time: '11:00AM'},]; // any json data or array of objects
                    const tableData = data.map(function(value){
                        return (
                            `<tr>
                                <td>${value.Name}</td>
                                <td>${value.Day}</td>
                                <td>${value.Time}</td>
                            </tr>`
                        );
                    }).join('');
                const tabelBody = document.querySelector("#tableBody");
                    tableBody.innerHTML = tableData;

    <table border="2">
            <thead class="thead-dark">
                <tr>
                 <th scope="col">Tour</th>
                 <th scope="col">Day</th>
                 <th scope="col">Time</th>
               </tr>
            </thead>
          <tbody id="tableBody">

        </tbody>
    </table>

Répondu el 17 de Décembre, 2020 par Sanan Ali (158 Points )

Answer 6

8voto

user3802764 Points 1

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Insert title here</title>
    </head>
    <body>
        <table id="myTable" cellpadding="2" cellspacing="2" border="1" onclick="tester()"></table>
        <script>
            var student;
            for (var j = 0; j < 10; j++) {
                student = {
                    name: "Name" + j,
                    rank: "Rank" + j,
                    stuclass: "Class" + j,
                };
                var table = document.getElementById("myTable");
                var row = table.insertRow(j);
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                var cell3 = row.insertCell(2);

                cell1.innerHTML = student.name,
                cell2.innerHTML = student.rank,
                cell3.innerHTML = student.stuclass;
            }
        </script>
    </body>
</html>

Répondu el 3 de Juillet, 2014 par user3802764 (1 Points )

Créer un tableau en utilisant Javascript

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Créer un tableau en utilisant Javascript

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: