Hace poco leí tres libros de O'Reilly, que generalmente llamamos libros de bestias (el nombre de uno de mis compañeros es muy parecido al mío, jajaja), y siempre he querido hacer una muestra para practicar mis habilidades, porque muchas empresas utilizan formularios dinámicos, entonces, intenté usar js para crear un formulario dinámico y usé el navegador firfox para depurarlo, porque es mejor usar el complemento firbug. Originalmente, no quería implementar una pequeña función. Si quieres hacer tantas cosas, simplemente haz clic en el botón para agregar una fila, y luego se agregaron más y más, y se volvieron cada vez más hermosas. Publique el código fuente para que todos puedan aprender juntos. Si tiene alguna pregunta, puede corregirla. Si es un principiante en js, tenga piedad.
PD: No sé por qué el número de línea no se muestra arriba. No lo he usado durante mucho tiempo. Las notas están escritas con claridad y todos pueden aprender juntos.
Copie el código de código de la siguiente manera:
<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transicional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeza>
<meta http-equiv="Tipo de contenido" content="text/html; charset=utf-8" />
<título>Tabla dinámica</título>
<tipo de estilo="texto/css">
cuerpo{ color de fondo:#9CC; alineación de texto:centro}
tabla{ margen:10px auto;}
tr th {borde: 1px sólido #096;}
td{borde: 1px sólido #096;}
</estilo>
<tipo de script="texto/javascript">
/* Solo se pueden declarar algunas variables fuera de la función y no se pueden usar métodos de operación porque no hay una función para llamarlas y ejecutarlas. */
//Al cargar la página, coloque el cuadro de selección en el encabezado de la tabla, porque es de un solo uso.
ventana.onload = función(){
var pestaña = document.getElementById('pestaña');
var firsttr = document.getElementsByTagName('tr')[0];
var childtd = firsttr.childNodes;
//Añadir un cuadro de selección a la primera fila y columna
var entrada = document.createElement('entrada');
inp.type = 'casilla de verificación';
//Registro de evento DOM Nivel 2
catchEvent(inp,'click',function(){ //Registrar función para juzgar diferentes estados
si(inp.marcado ==verdadero){
todaSeleccionar();
}demás{
cancelarSelect();
}
});
//catchEvent(inp,'click',allSelect);
//catchEvent(inp,'cambiar',cancelSelect);
childtd[0].appendChild(inp);
}
//Añadir una fila
//var count =0;//Agregar una columna para contar
función agregarFila(){
//cuenta++;
var pestaña = document.getElementById('pestaña');
var firsttr = document.getElementsByTagName('tr')[0];
var childtd = firsttr.childNodes;
var tr = document.createElement('tr');
var arrtd = nueva matriz();
var arrinp = nueva matriz();
for(var i =0;i<childtd.length;i++){
arrtd[i] = document.createElement('td');
arrinp[i] = document.createElement('entrada');
si(i==0){
arrinp[i].type = 'casilla de verificación';
arrinp[i].nombre = 'cuadro de selección';
}de lo contrario si(i==1){
//arrinp[i] = document.createTextNode(count);
arrinp[i] = document.createTextNode('');
}
arrtd[i].appendChild(arrinp[i]);// Piense por qué la entrada también necesita agregar una matriz.
tr.appendChild(arrtd[i]);
}
tab.appendChild(tr);
nuevaOrdenación();
}
//Eliminar operación
función eliminarFila(){
var parentTr = new Array();//Primero coloque las filas seleccionadas en una matriz
var cuadro = document.getElementsByName('selectbox');
var pestaña = document.getElementById('pestaña');
for(var i = 0;i<box.length;i++){
si(cuadro[i].marcado==verdadero){
var padre = cuadro[i].parentNode;
parentTr[i] = parent.parentNode;// Si esto se coloca directamente dentro, ¿por qué no se puede eliminar por completo? ? ¿Es porque no hay suficiente respuesta?
//tab.removeChild(parentTr);
}
}
for(var i = 0;i<parentTr.length;i++){ //Esto eliminará todos los elementos seleccionados
if(parentTr[i]){ // Aquí primero debemos determinar si es un valor nulo. Si no es nulo, elimínelo. De lo contrario, se informará un error.
tab.removeChild(parentTr[i]);
}
}
nuevaOrdenación();
}
//Si se realiza la eliminación, reordenar
función nuevaOrdenar(){
var texto = nueva matriz();
var child_td = nueva matriz();
var arr_tr = document.getElementsByTagName('tr');
for(var i = 1;i<arr_tr.length;i++){
child_td[i] = arr_tr[i].childNodes[1];//Obtiene todos los nodos en la segunda columna a partir de la segunda fila
if(child_td[i].childNodes[0]){
child_td[i].removeChild(child_td[i].childNodes[0]);
}
texto[i] = documento.createTextNode(i);
child_td[i].appendChild(texto[i]);
}
}
//selecciona toda la operación
función todaSeleccionar(){
var cuadro = document.getElementsByName('selectbox');
for(var i= 0;i<box.length;i++){
cuadro[i].marcado = verdadero;
}
}
//Cancelar todas las selecciones
función cancelarSelect(){
var cuadro = document.getElementsByName('selectbox');
para(var i = 0;i<box.length;i++){
if(cuadro[i].marcado == verdadero){
cuadro[i].marcado =falso;
}
}
}
//Función de registro de eventos
función catchEvent(eventobj,event,eventHandler){
si(eventobj.addEventListener){
eventobj.addEventListener(evento,eventHandler,false);
}si no (eventobj.attachEvent){
evento = 'activado'+evento;
eventobj.attachEvent(evento,eventHandler);
}
}
//catchEvent(agregar,'hacer clic',addRow);
</script>
</cabeza>
<cuerpo>
<h3>Tabla dinámica</h3>
<tipo de entrada="botón" valor="Agregar" id="agregar" onclick="addRow()" />
<tipo de entrada="botón" valor="Seleccionar todo" onclick="allSelect()" />
<tipo de entrada="botón" valor="Cancelar todo" onclick="cancelSelect()" />
<tipo de entrada="botón" valor="Eliminar" id="eliminar" onclick="deleteRow()"/>
<table id="tab" cellpadding="5px" cellspace="0px">
<tr><td></td><td>Número de serie</td><td>Pregunta uno</td><td>Pregunta dos</td><td>Pregunta tres</td></tr>
</tabla>
</cuerpo>
</html></span>