Créer un tableau en utilisant Javascript

J'ai une fonction JavaScript qui crée une table avec 3 lignes 2 cellules.
Quelqu'un pourrait-il me dire comment je peux créer la table ci-dessous en utilisant ma fonction (je dois le faire pour ma situation)?Créer un tableau en utilisant Javascript

Mon HTML:

<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>

JavaScript:

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"); 
    }

Source

2013-02-01 Manny Fitzgerald

Cela devrait fonctionner (de quelques modifications à 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) 
}

Source

2013-02-01 09:55:36

bonne solution, mais il est préférable de créer les variables en dehors de la boucle –

@Cerbrus Il est bon solution, mais cela ne fonctionne pas avant IE8. La table est ajoutée à l'explorateur DOM mais de toute façon, elle n'est pas visible. Est-ce que quelqu'un sait comment résoudre cela? – bdogru

@bdogru: Pourquoi avez-vous besoin de soutenir IE8? C'est ancien. Google [a abandonné ce navigateur fin 2012] (http://www.computerworld.com/article/2492571/web-apps/google-to-drop-support-for-ie8-on-nov--15.html) – Cerbrus

Code légèrement plus court en utilisant insertRow et insertCell:

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

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

En outre, cela n'utilise pas des "mauvaises pratiques" telles que la définition d'un attribut border au lieu d'utiliser CSS, et il accède au body à travers document.body au lieu de document.getElementsByTagName('body')[0];

Source

2013-02-01 10:38:45 Cerbrus

Typo en première ligne ('instertRow'), je ne peux pas éditer. – Cyrbil

Merci, cela a été édité maintenant :-) – Cerbrus

<!DOCTYPE html> 
<html> 
    <body> 
     <p id="p1"> 
      <b>Enter the no of row and column to create table:</b> 
      <br/><br/> 
      <table> 
       <tr> 
        <th>No. of Row(s) </th> 
        <th>No. of Column(s)</th> 
       </tr> 
       <tr> 
        <td><input type="text" id="row" value="4" /> X</td> 
        <td><input type="text" id="col" value="7" />Y</td> 
       </tr> 
      </table> 
      <br/> 
      <button id="create" onclick="create()">create table</button> 
     </p> 
     <br/><br/> 
     <input type="button" value="Reload page" onclick="reloadPage()"> 
     <script> 
      function create() { 
       var row = parseInt(document.getElementById("row").value); 
       var col = parseInt(document.getElementById("col").value); 

       var tablestart="<table id=myTable border=1>"; 
       var tableend = "</table>"; 
       var trstart = "<tr bgcolor=#ff9966>"; 
       var trend = "</tr>"; 
       var tdstart = "<td>"; 
       var tdend = "</td>"; 
       var data="data in cell"; 
       var str1=tablestart + trstart + tdstart + data + tdend + trend + tableend; 
       document.write(tablestart); 

       for (var r=0;r<row;r++) { 
        document.write(trstart); 
        for(var c=0; c<col; c++) { 
         document.write(tdstart+"Row."+r+" Col."+c+tdend); 
        } 
       } 

       document.write(tableend); 
       document.write("<br/>"); 
       var s="<button id="+"delete"+" onclick="+"deleteTable()"+">Delete top Row </button>"; 
       document.write(s); 
       var relod="<button id="+"relod"+" onclick="+"reloadPage()"+">Reload Page </button>"; 
       document.write(relod); 
      } 
      function deleteTable() { 
       var dr=0; 
       if(confirm("It will be deleted..!!")) { 
        document.getElementById("myTable").deleteRow(dr); 
       } 
      } 
      function reloadPage(){ 
       location.reload(); 
      } 
     </script> 
    </body> 
</html>

Source

2013-06-29 10:38:18

<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>

Source

2014-07-03 17:36:10 user3802764

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); 
}

Source

2015-06-03 10:02:30

J'espère que cela utile.

HTML:

<html> 
<head> 
    <link rel = "stylesheet" href = "test.css"> 
<body> 

</body> 
<script src = "test.js"></script> 
</head> 
</html>

JAVASCRIPT:

var tableString = "<table>", 
    body = document.getElementsByTagName('body')[0], 
    div = document.createElement('div'); 

for (row = 1; row < 101; row += 1) { 

    tableString += "<tr>"; 

    for (col = 1; col < 11; col += 1) { 

     tableString += "<td>" + "row [" + row + "]" + "col [" + col + "]" + "</td>"; 
    } 
    tableString += "</tr>"; 
} 

tableString += "</table>"; 
div.innerHTML = tableString; 
body.appendChild(div);

Source

2017-05-30 08:59:42

var btn = document.createElement('button'); 
 
btn.innerHTML = "Create Table"; 
 
document.body.appendChild(btn); 
 
btn.addEventListener("click", createTable, true); 
 
function createTable(){ 
 
var div = document.createElement('div'); 
 
div.setAttribute("id", "tbl"); 
 
document.body.appendChild(div) 
 
\t document.getElementById("tbl").innerHTML = "<table border = '1'>" + 
 
    '<tr>' + 
 
    '<th>Heading</th>' + 
 
    '<th>Heading</th> ' + 
 
    '<th>Heading</th>' + 
 
    '</tr>' + 
 
    '<tr>' + 
 
    '<td>cell</td>' + 
 
    '<td>cell</td>' + 
 
    '<td>cell</td>' + 
 
    '</tr>' + 
 
    '<tr>' + 
 
    '<td>cell</td>' + 
 
    '<td>cell</td>' + 
 
    '<td>cell</td>' + 
 
    '</tr>' + 
 
    '<tr>' + 
 
    '<td>cell</td>' + 
 
    '<td>cell</td>' + 
 
    '<td>cell</td>' + 
 
    '</tr>' 
 
};

Source

2017-09-26 11:40:21

Cette réponse peut être correcte, mais ce n'est pas évident pourquoi. Si vous pouvez également fournir une explication, il sera plus utile aux personnes qui liront votre réponse et les aidera à décider si cela s'applique à leur problème ou non. – Mikkel

Créer un tableau en utilisant Javascript

Répondre

Questions connexes