Reproduktionsbild:
Code:
JS fügen dynamisch Tabellendaten_2.html hinzu
Die Codekopie lautet wie folgt:
<! DocType html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<titels> Js fügt dynamisch Tabellendaten_2 -Implementierung mit Insertrow- und InsertCell -Methoden </title> hinzu
<script type = "text/javaScript">
var mailarr = [
{"Titel": "A C# Problem", "Name": "Zhang San", "Datum": "2014-03-21"},
{"Titel": "Ein JavaScript-Problem", "Name": "Li Si", "Datum": "2014-03-21"},
{"Titel": "A C Frage", "Name": "55", "Datum": "2014-03-21"},
{"Titel": "A C ++ Frage", "Name": "Zhao Liu", "Datum": "2014-03-21"}
];
var tab = null;
window.onload = function () {
loadTab ();
// Wählen Sie alle aus
document.getElementById ("sela"). onclick = function () {
if (document.getElementById ("sela"). checked == true) {
seleall (tab, true);
} anders {
seleall (tab, false);
}
};
// Alle ausgewählten löschen
document.getElementById ("delsel"). onclick = function () {
// Übertragen Sie alle Eingabesteuerelemente (mit Ausnahme des letzten Kontrollkästchens, das ausgewählt ist)
var chks = document.getElementsByTagName ('input');
für (var i = chks.length-2; i> = 0; i--) {
var chk = kks [i];
if (chk.checked == true) {
// Verarbeitung von Zeilenlöschungen auswählen
var rownow = chk.parentnode.parentnode;
Rownow.Parentnode.removechild (Rownow);
} anders {
alarm ("wirklich");
}
}
};
};
Funktion loadTab () {
tab = document.getElementById ("TB");
// Die Mailarr -Schleife durchquerte Methode in der Tabelle in TR
für (var rowIndex = 0; rowIndex <mailarr.length; rowIndex ++) {
// var tr = tab.insertrow (-1); //-1 bezieht sich auf die letzte Zeile
var tr = tab.insertrow (tab.rows.length - 1); // In die letzten beiden Zeilen einfügen, und die letzte Zeile sollte für die ausgewählte Zeile aufbewahrt werden.
var td1 = tr.insertcell (-1);
td1.innerHtml = "<Eingabe type = 'CheckBox'/>";
var td2 = tr.insertcell (-1);
td2.ernnerhtml = mailarr [rowIndex] .title;
var td3 = tr.insertcell (-1);
TD3.Nerhtml = Mailarr [RowIndex] .Name;
var td4 = tr.insertcell (-1);
td4.InnerHtml = Mailarr [rowIndex] .Date;
}
}
// Um die Schaltfläche auszuwählen, müssen Sie alle Zeilen der Tabelle durchqueren
Funktion seleall (mailTab, issel) {
für (var i = 0; i <mailTab.rows.length; i ++) {
var tr = mailTab.rows [i];
TR.Cells [0] .Childnodes [0].
}
}
</script>
</head>
<body>
<table id = "tb" style = "Border-Collapse: Zusammenbruch;">
<tr>
<Th> Sequenz </th>
<Th> Titel </th>
<Th> Mailer </th> senden
<Th> Zeit senden </th>
</tr>
<!-Schleife erhöhen->
<!-Wählen Sie alle->
<tr>
<td colspan = "4">
<input id = "sela" type = "CheckBox" /> <label für = "sela"> Wählen Sie alle < /label> aus
<a href = "#" id = "delsel"> löschen </a> </td>
</tr>
</table>
</body>
</html>