J'ai récemment lu trois livres d'O'Reilly, que nous appelons généralement des livres de bêtes (le nom d'un de mes camarades de classe ressemble beaucoup au mien, mdr), et j'ai toujours voulu en faire un échantillon pour mettre en pratique mes compétences, car de nombreuses entreprises utilisent formulaires dynamiques, donc j'ai essayé d'utiliser js pour créer un formulaire dynamique et j'ai utilisé le navigateur firfox pour le déboguer, car le plug-in firbug est préférable à utiliser. À l'origine, je voulais implémenter une petite fonction. vous voulez faire tant de choses, cliquez simplement sur le bouton pour ajouter une ligne, puis de plus en plus ont été ajoutées, et elles sont devenues de plus en plus belles. Postez le code source pour que tout le monde puisse apprendre ensemble. Si vous avez des questions, vous pouvez les corriger. Si vous êtes débutant en js, soyez miséricordieux.
ps : je ne sais pas pourquoi le numéro de ligne n'est pas affiché ci-dessus, je ne l'ai pas utilisé depuis longtemps. Les notes sont clairement rédigées et tout le monde peut apprendre ensemble.
Copiez le code comme suit :
<span style="font-size:18px;"><!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">
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table dynamique</title>
<style type="text/css">
corps{ couleur d'arrière-plan :#9CC ; texte-align :centre}
tableau{ marge:10px auto;}
tr th { bordure : 1px solide #096 ;}
td{bordure : 1px solide #096 ;}
</style>
<script type="text/javascript">
/* Seules certaines variables peuvent être déclarées en dehors de la fonction, et les méthodes d'opération ne peuvent pas être utilisées car il n'y a pas de fonction pour l'appeler et l'exécuter. */
//Lors du chargement de la page, placez la case de sélection dans l'en-tête du tableau, car il s'agit d'une utilisation unique
window.onload = fonction(){
var tab = document.getElementById('tab');
var firsttr = document.getElementsByTagName('tr')[0];
var childtd = firsttr.childNodes;
//Ajoute une zone de sélection à la première ligne et à la première colonne
var inp = document.createElement('input');
inp.type = 'case à cocher';
//Inscription aux événements DOM niveau 2
catchEvent(inp,'click',function(){ //Enregistrer la fonction pour juger différents états
if(inp.checked ==true){
allSelect();
}autre{
annulerSélectionner();
}
});
//catchEvent(inp,'clic',allSelect);
//catchEvent(inp,'change',cancelSelect);
childtd[0].appendChild(inp);
}
//Ajouter une ligne
//var count =0;//Ajouter une colonne pour compter
fonction addRow(){
//compte++;
var tab = document.getElementById('tab');
var firsttr = document.getElementsByTagName('tr')[0];
var childtd = firsttr.childNodes;
var tr = document.createElement('tr');
var arrtd = nouveau tableau();
var arrivéep = new Array();
pour(var i =0;i<childtd.length;i++){
arrtd[i] = document.createElement('td');
arrinp[i] = document.createElement('input');
si(i==0){
arrinp[i].type = 'case à cocher';
arrinp[i].name = 'selectbox';
}sinon si(i==1){
//arrinp[i] = document.createTextNode(count);
arrinp[i] = document.createTextNode('');
}
arrtd[i].appendChild(arrinp[i]);//Réfléchissez à la raison pour laquelle l'entrée doit également ajouter un tableau.
tr.appendChild(arrtd[i]);
}
tab.appendChild(tr);
nouveauTri();
}
//Opération de suppression
fonction deleteRow(){
var parentTr = new Array();//Placez d'abord les lignes sélectionnées dans un tableau
var box = document.getElementsByName('selectbox');
var tab = document.getElementById('tab');
pour(var je = 0;i<box.length;i++){
if(box[i].checked==true){
var parent = box[i].parentNode;
parentTr[i] = parent.parentNode;//Si ceci est placé directement à l'intérieur, pourquoi ne peut-il pas être complètement supprimé ? ? Est-ce parce qu'il n'y a pas assez de réponses ?
//tab.removeChild(parentTr);
}
}
for(var i = 0;i<parentTr.length;i++){ //Cela supprimera tous les éléments sélectionnés
if(parentTr[i]){ //Ici, nous devons d'abord déterminer s'il s'agit d'une valeur nulle. Si ce n'est pas le cas, supprimez-la. Sinon, une erreur sera signalée.
tab.removeChild(parentTr[i]);
}
}
nouveauTri();
}
//Si la suppression est effectuée, re-trier
fonction nouveauTri(){
var texte = nouveau tableau();
var child_td = nouveau tableau();
var arr_tr = document.getElementsByTagName('tr');
pour(var je = 1;i<arr_tr.length;i++){
child_td[i] = arr_tr[i].childNodes[1];//Obtenir tous les nœuds de la deuxième colonne à partir de la deuxième ligne
si(child_td[i].childNodes[0]){
child_td[i].removeChild(child_td[i].childNodes[0]);
}
texte[i] = document.createTextNode(i);
child_td[i].appendChild(text[i]);
}
}
//sélectionne toutes les opérations
fonction allSelect(){
var box = document.getElementsByName('selectbox');
pour(var i= 0;i<box.length;i++){
box[i].checked = vrai;
}
}
//Annuler toutes les sélections
fonction annulerSélectionner(){
var box = document.getElementsByName('selectbox');
pour(var je = 0;i<box.length;i++){
if(box[i].checked == true){
box[i].checked =false;
}
}
}
//Fonction d'enregistrement d'événement
fonction catchEvent(eventobj,event,eventHandler){
si(eventobj.addEventListener){
eventobj.addEventListener(event,eventHandler,false);
}sinon si(eventobj.attachEvent){
événement = 'on'+événement;
eventobj.attachEvent(event,eventHandler);
}
}
//catchEvent(ajouter,'cliquez',addRow);
</script>
</tête>
<corps>
<h3>Tableau dynamique</h3>
<input type="button" value="Add" id="add" onclick="addRow()" />
<input type="button" value="Sélectionner tout" onclick="allSelect()" />
<input type="button" value="Tout annuler" onclick="cancelSelect()" />
<input type="button" value="Delete" id="delete" onclick="deleteRow()"/>
<table id="tab" cellpadding="5px" cellpacing="0px">
<tr><td></td><td>Numéro de série</td><td>Première question</td><td>Question deux</td><td>Question trois</td></tr>
</table>
</corps>
</html></span>