En el desarrollo de aplicaciones, cierta información de entrada es dinámica, como la experiencia laboral que queremos registrar a un empleado, como la siguiente figura
Si se convierte en un callejón sin salida, solo puede completar tres, ¿qué pasa si son cuatro? O más, ¿no es imposible agregarlo? Por lo tanto, esto no es bueno, podemos agregar dinámicamente filas de tabla, como se muestra en la figura a continuación, agregue una fila e ingrese una fila de información, que es más flexible.
Echemos un vistazo a cómo combinar JavaScript en ASP y ASP.NET para lograr este efecto:
En primer lugar, las tablas agregando dinámicamente se implementan en primer plano. Cuando la siguiente estación está disponible, puede ser posible, pero se puede usar AJAX, lo cual es muy problemático, por lo que es mejor usar JavaScript para implementarlos. Las siguientes son dos formas de agregar dinámicamente filas de tabla:
El primer tipo: código fuente
JavaScript:
<script type = "text/javaScript">/** // * Esta función se usa para agregar una fila dinámicamente * Tabobj: tabla de destino * Colnum: el número de columnas que de una fila en la tabla * SORPOS: la fuente de la nueva fila. * TARGPOS: la posición donde se agregará la nueva fila. * */ function addrow (Tabobj, Colnum, Sorpos, Targpos) {var ntr = Tabobj.insertrow (Tabobj.rows.length-TargPos); // inserta una nueva fila en la tabla designada en el puesto // designado. var trs = tabobj.getElementsBytagName ('tr'); // Obtener la colección TRS de la tabla designada var Sortr = TRS [SORPOS]; // colocó el SORTR var tds = Sortr.getElementsBytagName ('td'); // Obtener la colección TDS de la fila designada if (colnum == 0 || colnum == Undefined || colnum == isnan) {colnum = tabobj.rows [0] .cells.length; } var ntd = new Array (); // Cree una nueva matriz TDS para (var i = 0; i <colnum; i ++) {// atraer los tds en fila ntd [i] = ntr.insertcell (); // Crear nueva celda ntd [i] .id = tds [0] .id; // Copiar la ID de TD a la nueva celda. | ¡Atención! El sufijo TDS // debe ser designado ntd [i] .innerhtml = tds [i] .innerhtml; // Copiar la ID de TD a la nueva celda. | ¡Atención! El sufijo TDS // debe ser designado ntd [i] .innerhtml = tds [i] .innerhtml; // Copiar el valor en Ntd [i] 's InnerHtml de los TDS correspondientes}}/** // * Esta función se usa para eliminar la fila designada en la tabla designada * Tabobj: la tabla designada * TarGpos: la posición de la fila de destino * btnobj: actualmente se hace clic en eliminar la eliminación * */función deletero 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> género </td> <td> edad </td> <td> host </td> <td> delete </td> </tr> <tryle = "visual > </td> <td id = tduserInfo> <input id = usersex name = usersex> </td> <td id = tDuserInfo> <input id = userage name = userege> </td> <td id = tDuserInfo> <input id = userLove name = userlove> </td> <td Id = tduserinfo> onClick = "deleterow (document.all.tabuserinfo, 1, this)"> </td> </tr> <tr> <tr> <td> <input type = button value = "add" onClick = "addrow (document.all.tabuserinfo, null, 1,1)"> </td> </tr> </port>