Dynamisch erstellen Tabelle in Javascript

Question

Ich bitte Sie um Hilfe mit DOM-Tabelle in JS. Wenn ich auf die Schaltfläche klicke, wird die Tabelle automatisch mit Beispieltexten erstellt. Ich möchte ein paar Funktionen für create table tag, thead, border und align center, caption, Daten (Zeilen und Zellen mit Text), tfoot, Zeile löschen, Zeile hinzufügen.

Ich weiß nicht, wie es geht.

Answer 1

Hier ein Beispiel, um loszulegen: Sie müssen die restlichen Funktionen selbst hinzufügen.

// get the first button by it's ID, and listen to the click event 
 
// add an empty table to the container div 
 
document.getElementById("btnTable").addEventListener("click", function(){ 
 
\t var basicTable = '<table id="table"></table>'; 
 
    document.getElementById('container').innerHTML = basicTable; 
 
}); 
 

 
// add contents to the table, ADD instead of REPLACE by using the += operator 
 
document.getElementById("btnTableContentsAdd").addEventListener("click", function(){ 
 
\t var tableContents = '<tr><td>Hello world!</td></tr>'; 
 
    document.getElementById('table').innerHTML += tableContents; 
 
}); 
 

 
// remove last table row 
 
document.getElementById("btnTableContentsRemove").addEventListener("click", function(){ 
 
    var lastRow = document.getElementById('table').lastElementChild; 
 
    document.getElementById('table').removeChild(lastRow); 
 
}); 
 

 
// set the border to 1px solid blue 
 
document.getElementById("btnTableBlueBorder").addEventListener("click", function(){ 
 
\t document.getElementById('table').style.border = "1px solid blue"; 
 
}); 
 

 
// set the border to 1px solid red 
 
document.getElementById("btnTableRedBorder").addEventListener("click", function(){ 
 
\t document.getElementById('table').style.border = "1px solid red"; 
 
});

<button id="btnTable">add empty table (invisible)</button> 
 
<button id="btnTableContentsAdd">add table contents</button> 
 
<button id="btnTableContentsRemove">remove table contents</button> 
 
<button id="btnTableBlueBorder">add blue table border</button> 
 
<button id="btnTableRedBorder">add red table border</button> 
 
<div id="container"></div>