<head>
<script>
function agregarFila(){
var nombre = document.getElementById("txtNombre").value;
var apellido = document
.getElementById("txtApellido").value;
var telefono = document
.getElementById("txtTelefono").value;
var direccion = document
.getElementById("txtDireccion").value;
var tabla = document
.getElementById("tblDinamica");
tabla.innerHTML = tabla.innerHTML +
"<tr bgcolor=\"#f0ffff\" name=\"fila\">"+
"<td>"+(nombre==""?" ":nombre)+"</td>"+
"<td>"+(apellido==""?" ":apellido)+"</td>"+
"<td>"+(telefono==""?" ":telefono)+"</td>"+
"<td>"+(direccion==""?" ":direccion)+"</td>"+
"<td align=\"center\"><input type=\"checkbox\" "+
"name=\"marca\"/"+"></td>"+
"</tr>";
}
function modificarFila(){
/* alert("Modificar"); */
var nombre = document.getElementById("txtNombre").value;
var apellido = document
.getElementById("txtApellido").value;
var telefono = document
.getElementById("txtTelefono").value;
var direccion = document
.getElementById("txtDireccion").value;
var tabla = document
.getElementById("tblDinamica");
var tabla = document.getElementById("tblDinamica");
var marcas = document.getElementsByName("marca");
for( i = marcas.length - 1 ; i >= 0 ; --i ){
if(marcas[i].checked){
marcas[i]
.parentNode.parentNode.parentNode.innerHTML =
"<tr bgcolor=\"#f0ffff\" name=\"fila\">"+
"<td>"+(nombre==""?" ":nombre)+"</td>"+
"<td>"+(apellido==""?" ":apellido)+"</td>"+
"<td>"+(telefono==""?" ":telefono)+"</td>"+
"<td>"+(direccion==""?" ":direccion)+"</td>"+
"<td align=\"center\"><input type=\"checkbox\" "+
"name=\"marca\"/"+"></td>"+
"</tr>";
}
}
}
function eliminarFila(){
var tabla = document.getElementById("tblDinamica");
var marcas = document.getElementsByName("marca");
for( i = marcas.length - 1 ; i >= 0 ; --i ){
if(marcas[i].checked){
tabla.removeChild(marcas[i]
.parentNode.parentNode.parentNode);
}
}
}
</script>
</head>
<body>
<form name="form1">
<H1 align="center"> TABLA DINAMICA </H1>
<table id="tblDinamica" border="2" rules="none" bgcolor="#0000ff">
<tr align="center" bgcolor="#0f0f0f">
<td colspan="5" >
<input type="button" id="btnAgregar" value="Agregar" onclick="agregarFila()"/>
<input type="button" value="Modificar"
onclick="modificarFila()"/>
<input type="button" value="Eliminar"
onclick="eliminarFila()"/>
</td>
</tr>
<tr align="center" bgcolor="#0f0f0f">
<td width="200">
<input type="text" id="txtNombre" size="10"/>
</td>
<td width="200">
<input type="text" id="txtApellido" size="10"/>
</td>
<td width="200">
<input type="text" id="txtTelefono" size="10"/>
</td>
<td width="200">
<input type="text" id="txtDireccion" size="10"/>
</td>
<td width="200" rowspan="2">
<font color="white">
MARCAR FILA A ELIMINAR O MODIFICAR
</font>
</td>
</tr>
<tr align="center" bgcolor="#ffffff" >
<td width="200">
NOMBRES
</td>
<td width="200">
APELLIDOS
</td>
<td width="200">
TELEFONO
</td>
<td width="200">
DIRECCION
</td>
</tr>
</table>
</form>
</body>
</html>
