Image de reproduction:
Code:
JS Ajouter dynamiquement la table DATA_2.html
La copie de code est la suivante:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> JS Ajoute dynamiquement la table Data_2 Implémentation à l'aide des méthodes Insertrow et INSERTCELL </TITAL>
<script type = "text / javascript">
var mailarr = [
{"Title": "A C # Problem", "Name": "Zhang San", "Date": "2014-03-21"},
{"Title": "A JavaScript Problem", "Name": "Li si", "Date": "2014-03-21"},
{"Title": "A C Question", "Nom": "55", "Date": "2014-03-21"},
{"Title": "A C ++ Question", "Nom": "Zhao Liu", "Date": "2014-03-21"}
]]
var tab = null;
window.onload = function () {
loadTab ();
// sélectionnez tout
document.getElementById ("sela"). onClick = function () {
if (document.getElementById ("Sela"). Vérified == true) {
seleall (tab, true);
} autre {
seleall (tab, false);
}
};
// Supprimer tous les sélections
document.getElementById ("Delsel"). OnClick = function () {
// Transférer tous les contrôles d'entrée (sauf la dernière case à cocher sélectionnée)
var chks = document.getElementsByTagName ('entrée');
pour (var i = chks.length - 2; i> = 0; i--) {
var chk = chks [i];
if (chk.checked == true) {
// sélectionner le traitement de suppression de lignes
var rownow = chk.parentNode.parentNode;
Rownow.ParentNode.removechild (Rownow);
} autre {
alerte ("vraiment");
}
}
};
};
fonction chargetab () {
tab = document.getElementById ("TB");
// Ajouter la méthode de traversée de boucle Mailarr à la table dans TR
pour (var rowIndex = 0; RowIndex <Mailarr.Length; RowIndex ++) {
// var tr = tab.insertrow (-1); // - 1 fait référence à la dernière ligne
var tr = tab.insertrow (tab.Rows.length - 1); // insérer dans les deux dernières lignes, et la dernière ligne doit être conservée pour la ligne sélectionnée tous.
var td1 = tr.insertCell (-1);
td1.innerhtml = "<input type = 'checkbox' />";
var td2 = tr.insertCell (-1);
TD2.InnerHtml = MailArr [RowIndex] .Title;
var td3 = tr.insertCell (-1);
td3.innerhtml = MailArr [RowIndex] .Name;
var td4 = tr.insertCell (-1);
td4.InnerHtml = MailArr [RowIndex] .Date;
}
}
// Pour rendre le bouton Sélectionner tous les bouton, vous devez traverser toutes les lignes de la table
fonction séleall (mailtab, issel) {
pour (var i = 0; i <mailtab.Rows.length; i ++) {
var tr = MailTab.Rows [i];
Tr.Cells [0] .ChildNodes [0] .Checked = issel;
}
}
</cript>
</ head>
<body>
<table id = "tb" style = "border-collapse: effondrement;">
<tr>
<h> Séquence </th>
<th> Titre </th>
<h> Envoyez Mailer </th>
<h> Envoyez le temps </th>
</tr>
<! - Augmentation de la boucle ->
<! - Sélectionnez tout ->
<tr>
<td colspan = "4">
<input id = "sela" type = "checkbox" /> <étiquette pour = "sela"> sélectionnez tout </ labe>
<a href = "#" id = "delsel"> supprimer </a> </td>
</tr>
</ table>
</docy>
</html>