Aca te lo dejo corregido con la opcion de agregar onfocus a cada campo input y un boton que borra las filas de la tabla y otro que las agrega.
Código HTML:
Ver original<!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"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
Código Javascript
:
Ver originalfunction agregar_fila() {
var tabla = document.getElementById("factura");
var fila = tabla.insertRow();
var celda1 = fila.insertCell(0);
var celda2 = fila.insertCell(1);
var celda3 = fila.insertCell(2);
var celda4 = fila.insertCell(3);
var campo1 = document.createElement("input");
campo1.type = "text";
campo1.setAttribute("onclick","vaciar_campo(this);");
var campo2 = campo1.cloneNode(true);
var campo3 = campo1.cloneNode(true);
var campo4 = document.createElement("input");
campo4.type = "button";
campo4.value = "Borrar Fila";
campo4.onclick = function() {
var fila = this.parentNode.parentNode;
var tbody = tabla.getElementsByTagName("tbody")[0];
tbody.removeChild(fila);
}
celda1.appendChild(campo1);
celda2.appendChild(campo2);
celda3.appendChild(campo3);
celda4.appendChild(campo4);
}
function vaciar_campo(input) {
input.value = "";
}
Código HTML:
Ver original td {
width:160px;
}
<table id="factura" cellpadding="5" cellspacing="5" border="1">
<input type="button" value="Agregar Fila" onclick="agregar_fila();"></td>
Notese que añadi los eventos onfocus usando setAttribute porque si uso onfocus = {...} o addEventListener al clonar el input, el input clonado pierde dicho registro de eventos.
Saludos