In der Anwendungsentwicklung sind einige Eingabeinformationen dynamisch, z. B. die Berufserfahrung, die wir für einen Mitarbeiter registrieren möchten, z. B. die folgende Abbildung
Wenn es zu einer Sackgasse verarbeitet wird, können Sie nur drei ausfüllen, was ist, wenn es vier ist? Oder mehr, ist es nicht unmöglich, es hinzuzufügen? Dies ist also nicht gut, wir können die Tabellenzeilen dynamisch hinzufügen, wie in der folgenden Abbildung gezeigt, eine Zeile hinzufügen und eine Reihe von Informationen eingeben, was flexibler ist
Schauen wir uns an, wie JavaScript in ASP und ASP.NET kombiniert werden kann, um diesen Effekt zu erzielen:
Zunächst wird im Vordergrund dynamisches Hinzufügen von Tabellen implementiert. Wenn die nächste Station verfügbar ist, kann er möglich sein, aber Ajax kann verwendet werden, was sehr problematisch ist. Daher ist es am besten, JavaScript zu verwenden, um sie zu implementieren. Im Folgenden finden Sie zwei Möglichkeiten zum dynamischen Hinzufügen von Tabellenzeilen:
Der erste Typ: Quellcode
JavaScript:
<script type = "text/javaScript">/** // * Diese Funktion wird verwendet, um eine Zeile dynamisch hinzuzufügen * Targpos: Die Position, in der die neue Zeile hinzugefügt wird. * */ function addrow (tabobj, colnum, sorpos, targpos) {var ntr = tabobj.insertrow (tabobj.rows.length-targpos); // Fügen Sie eine neue Zeile in die festgelegte Tabelle auf der festgelegten Position ein. var trs = tabobj.getElementsByTagName ('tr'); // TRS -Sammlung aus der festgelegten Tabelle var Sortr = trs [sorpos] erhalten; // positionierte die SORTR var tds = Sortr.getElementsByTagName ('td'); // TDS -Sammlung aus der festgelegten Zeile abrufen if (colnum == 0 || colnum == undefined || colnum == isnan) {colnum = tabobj.rows [0] .cells.length; } var ntd = new Array (); // Erstellen Sie ein neues TDS -Array für (var i = 0; i <colnum; i ++) {// Traverl die TDS in Zeile ntd [i] = ntr.insertcell (); // neue Zelle ntd erstellen [i] .id = tds [0] .id; // Kopieren Sie die ID des TD in neue Zelle. | Aufmerksamkeit! Das TDS // Suffix muss zu NTD [i] .ernerhtml = tds [i] .ernerhtml ernannt werden; // Kopieren Sie die ID des TD in neue Zelle. | Aufmerksamkeit! Das TDS // Suffix muss zu NTD [i] .ernerhtml = tds [i] .ernerhtml ernannt werden; // copy the value in ntd[i]'s innerHTML from corresponding TDs } } /**//* This function is used to remove appointed row in appointed table * tabObj: the appointed table * targPos: target row position * btnObj: currently clicked delete image button * */ function deleteRow(tabObj,targPos,btnObj){ //Remove table row for(var i =0; i <tabobj.rows.length; i ++) {if (tabobj.getElementsByTagName ('img') [i] == btnobj) {tabobj.deleterow (i+targpos); }}}} </script>Html
<table id = tabuserinfo border = 1> <tr> <td> Name </td> <td> Geschlecht </td> <td> Alter </td> <td> Host </td> <td> delete </td> </tr> <tr style = "display: none" truerinfo> <Td id = tduserinfo id = uenerfo> <tdus id = tdusalin > </td> <td id = tduserinfo> <input id = userex name = userex> </td> <td id = tduserinfo> <input id = userage name = userage> </td> <td id = tduserinfo> <Eingabe id = userLove name = userLove onClick="deleteRow(document.all.tabUserInfo,1,this)"></td> </tr> <tr> <td><input type=button value="Add" onClick="addRow(document.all.tabUserInfo,null,1,1)"></td> </tr> </table>