Cet article décrit comment JS met en œuvre l'addition dynamique, la suppression et la mise à jour des tables. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
La copie de code est la suivante:
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> Table Operation </TITME>
<style type = "text / css">
corps {
taille de police: 13px;
hauteur de ligne: 25px;
}
tableau {
Border-top: 1px solide # 333;
Border-Bottom: 1px solide # 333;
Largeur: 300px;
}
td {
Border-droite: 1px solide # 333;
Border-Bottom: 1px solide # 333;
}
.titre {
Texte-aligne: Centre;
Police-poids: Bold;
Contexte: #ccc;
}
.centre {
Texte-aligne: Centre;
}
#DisplayInfo {
Couleur: rouge;
}
</ style>
<script type = "text / javascript">
fonction addRow () {// ajouter une ligne
var tableoBj = document.getElementById ('myTable');
var rownums = tableobj.rows.length;
var newrow = tableobj.insertrow (Rownums);
var col1 = newrow.insertCell (0);
col1.innerhtml = "Le bonheur tombe du ciel";
var col2 = newrow.insertCell (1);
col2.innerhtml = "18,5 $";
col2.align = "Centre";
var divinfo = document.getElementById ('afficheinfo');
divinfo.innerhtml = "Ajouter un produit avec succès";
}
fonction delrow () {// supprime la deuxième ligne
document.getElementById ('myTable'). Deleterow (1);
var divinfo = document.getElementById ('afficheinfo');
divinfo.innerhtml = "Supprimer avec succès le produit";
}
fonction updaterow () {// Mettez à jour les informations de ligne
var urrow = document.getElementById ('mytable'). lignes [0];
urow.classname = "title";
}
</cript>
</ head>
<body>
<table cellpadding = "0" cellpacing = "0" id = "myTable">
<tr id = "row1">
<TD> Titre du livre </td>
<TD> Prix </td>
</tr>
<tr id = "row2">
<TD> La pièce avec vue </td>
<TD> 30,00 $ </td>
</tr>
<tr id = "row3">
<TD> 60 moments </td>
<TD> 32,00 $ </td>
</tr>
</ table>
<input name = "b1" type = "bouton" value = "Ajouter une ligne" onclick = "javascript: addRow ();" /> <br />
<input name = "b2" type = "bouton" value = "Supprimer la deuxième ligne" onclick = "javascript: delrow ();" /> <br />
<input name = "b3" type = "bouton" value = "modifier le titre" onclick = "javascript: updaterow ();" /> <br />
<div id = "displayInfo"> </div>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.