Ich habe kürzlich drei O'Reilly-Bücher gelesen, die wir im Allgemeinen als Biest-Bücher bezeichnen (der Name eines meiner Klassenkameraden ist meinem sehr ähnlich, lol), und ich wollte schon immer eine Probe machen, um meine Fähigkeiten zu üben, da viele Unternehmen sie verwenden Dynamische Formulare, also habe ich versucht, js zu verwenden, um ein dynamisches Formular zu erstellen, und habe den Firfox-Browser zum Debuggen verwendet, da das Firbug-Plug-In ursprünglich besser zu verwenden war Wenn Sie so viel tun möchten, klicken Sie einfach auf die Schaltfläche, um eine Zeile hinzuzufügen. Dann wurden immer mehr hinzugefügt und sie wurden immer schöner. Veröffentlichen Sie den Quellcode, damit alle gemeinsam lernen können. Wenn Sie Fragen haben, können Sie diese korrigieren. Wenn Sie ein Anfänger in js sind, haben Sie bitte Verständnis.
PS: Ich weiß nicht, warum die Zeilennummer oben nicht angezeigt wird. Ich habe sie schon lange nicht mehr verwendet. Die Notizen sind klar geschrieben und jeder kann gemeinsam lernen.
Kopieren Sie den Codecode wie folgt:
<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">
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamische Tabelle</title>
<style type="text/css">
body{ Hintergrundfarbe:#9CC; text-align:center}
Tabelle{ margin:10px auto;}
tr th { border: 1px solid #096;}
td{border: 1px solid #096;}
</style>
<script type="text/javascript">
/*Nur einige Variablen können außerhalb der Funktion deklariert werden und Operationsmethoden können nicht verwendet werden, da keine Funktion zum Aufrufen und Ausführen vorhanden ist. */
// Platzieren Sie beim Laden der Seite das Auswahlfeld im Tabellenkopf, da es sich um eine einmalige Verwendung handelt
window.onload = function(){
var tab = document.getElementById('tab');
var firsttr = document.getElementsByTagName('tr')[0];
var childtd = firsttr.childNodes;
//Fügen Sie der ersten Zeile und Spalte ein Auswahlfeld hinzu
var inp = document.createElement('input');
inp.type = 'checkbox';
//DOM-Level-2-Event-Registrierung
CatchEvent(inp,'click',function(){ //Funktion registrieren, um verschiedene Zustände zu beurteilen
if(inp.checked ==true){
allSelect();
}anders{
cancelSelect();
}
});
//catchEvent(inp,'click',allSelect);
//catchEvent(inp,'change',cancelSelect);
childtd[0].appendChild(inp);
}
//Eine Zeile hinzufügen
//var count =0;//Eine Spalte zum Zählen hinzufügen
Funktion addRow(){
//count++;
var tab = document.getElementById('tab');
var firsttr = document.getElementsByTagName('tr')[0];
var childtd = firsttr.childNodes;
var tr = document.createElement('tr');
var arrtd = new Array();
var arinp = new Array();
for(var i =0;i<childtd.length;i++){
arrtd[i] = document.createElement('td');
arinp[i] = document.createElement('input');
if(i==0){
arinp[i].type = 'checkbox';
arinp[i].name = 'selectbox';
}else if(i==1){
//arrinp[i] = document.createTextNode(count);
arinp[i] = document.createTextNode('');
}
arrtd[i].appendChild(arrinp[i]);// Überlegen Sie, warum bei der Eingabe auch ein Array hinzugefügt werden muss.
tr.appendChild(arrtd[i]);
}
tab.appendChild(tr);
newSort();
}
//Vorgang löschen
Funktion deleteRow(){
var parentTr = new Array();//Fügen Sie zuerst die ausgewählten Zeilen in ein Array ein
var box = document.getElementsByName('selectbox');
var tab = document.getElementById('tab');
for(var i = 0;i<box.length;i++){
if(box[i].checked==true){
var parent = box[i].parentNode;
parentTr[i] = parent.parentNode;//Wenn dies direkt darin platziert wird, warum kann es dann nicht vollständig gelöscht werden? ? Liegt es daran, dass es nicht genügend Reaktionen gibt?
//tab.removeChild(parentTr);
}
}
for(var i = 0;i<parentTr.length;i++){ //Dies löscht alle ausgewählten Elemente
if(parentTr[i]){ //Hier müssen wir zunächst feststellen, ob es sich um einen Nullwert handelt. Andernfalls wird ein Fehler gemeldet.
tab.removeChild(parentTr[i]);
}
}
newSort();
}
//Wenn das Löschen durchgeführt wird, sortieren Sie neu
Funktion newSort(){
var text = new Array();
var child_td = new Array();
var arr_tr = document.getElementsByTagName('tr');
for(var i = 1;i<arr_tr.length;i++){
child_td[i] = arr_tr[i].childNodes[1];//Alle Knoten in der zweiten Spalte ab der zweiten Zeile abrufen
if(child_td[i].childNodes[0]){
child_td[i].removeChild(child_td[i].childNodes[0]);
}
text[i] = document.createTextNode(i);
child_td[i].appendChild(text[i]);
}
}
//Alle Operationen auswählen
Funktion allSelect(){
var box = document.getElementsByName('selectbox');
for(var i= 0;i<box.length;i++){
box[i].checked = true;
}
}
//Alle Auswahlen abbrechen
Funktion cancelSelect(){
var box = document.getElementsByName('selectbox');
for(var i = 0;i<box.length;i++){
if(box[i].checked == true){
box[i].checked =false;
}
}
}
//Funktion zur Ereignisregistrierung
Funktion CatchEvent(eventobj,event,eventHandler){
if(eventobj.addEventListener){
eventobj.addEventListener(event,eventHandler,false);
}else if(eventobj.attachEvent){
event = 'on'+event;
eventobj.attachEvent(event,eventHandler);
}
}
//catchEvent(add,'click',addRow);
</script>
</head>
<Körper>
<h3>Dynamische Tabelle</h3>
<input type="button" value="Add" id="add" onclick="addRow()" />
<input type="button" value="Alle auswählen" onclick="allSelect()" />
<input type="button" value="Alles abbrechen" onclick="cancelSelect()" />
<input type="button" value="Delete" id="delete" onclick="deleteRow()"/>
<table id="tab" cellpadding="5px" cellpacing="0px">
<tr><td></td><td>Seriennummer</td><td>Frage eins</td><td>Frage zwei</td><td>Frage drei</td></tr>
</table>
</body>
</html></span>