Ich habe eine JavaScript-Funktion, die eine Tabelle mit 3 Zeilen 2 Zellen erstellt.
Kann mir jemand sagen, wie ich die folgende Tabelle mit meiner Funktion erstellen kann (ich muss dies für meine Situation tun)?
Hier ist mein Javascript und HTML-Code unten angegeben:
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> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
javascript
html-table
Manny Fitzgerald
quelle
quelle
Etwas kürzerer Code mit
insertRow
undinsertCell
:Außerdem werden hierbei keine "schlechten Praktiken" verwendet, z. B. das Festlegen eines
border
Attributs anstelle von CSS, und esbody
wirddocument.body
stattdessen auf das Through zugegriffendocument.getElementsByTagName('body')[0]
.quelle
quelle
quelle
quelle
Ich hoffe, Sie finden das hilfreich.
HTML:
JAVASCRIPT:
quelle
Kann das in dieser speziellen Frage beschriebene Problem möglicherweise nicht lösen, kann jedoch für Personen nützlich sein, die Tabellen aus einer Reihe von Objekten erstellen möchten:
quelle
quelle
Ich habe eine Version geschrieben, die eine Liste von Objekten dynamisch analysieren kann, um die Tabelle als Zeichenfolge zu erstellen. Ich habe es in drei Funktionen aufgeteilt, um die Kopfspalten und die Textzeilen zu schreiben und alles zusammenzufügen. Ich habe als Zeichenfolge zur Verwendung auf einem Server exportiert. Mein Code verwendet Vorlagenzeichenfolgen , um die Dinge elegant zu halten.
Wenn Sie ein Styling hinzufügen möchten (z. B. Bootstrap), können Sie dies durch Hinzufügen von mehr HTML zu
HEAD_PREFIX
und tunHEAD_SUFFIX
.Hier ist ein Beispiel:
quelle
quelle
Auf diese Weise können Sie ein Javascript-Objekt durchlaufen und die Daten in eine Tabelle einfügen. Der Code wurde anhand der Antwort von @ Vanuan geändert.
quelle
quelle