echale un ojo a este ejemplo rapido:
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<script>
function AgregaConcepto() {
var miTabla = document.getElementById("cuerpoTabla");
if ((miTabla.getElementsByTagName("tr").length + 1)<11){
var fila = document.createElement("tr");
var celda1 = document.createElement("td");
var celda2 = document.createElement("td");
var celda3 = document.createElement("td");
var celda4 = document.createElement("td");
var celda5 = document.createElement("td");
celda1.width = "287px"
celda2.width = "115px"
celda3.width = "108px"
celda4.width = "51px"
celda5.align = "left"
celda1.innerHTML = "<input type=checkbox><input type='text' name='EdOConcepto' size='37'>"
celda2.innerHTML = "<input type='text' name='EdOCantidad' class='Cifras'>";
celda3.innerHTML = "<input type='text' name='EdOPrecio' class='Cifras'></td>"
celda4.innerHTML = " </td>"
celda5.innerHTML = "<input type='text' name='EdOImporte' size='10' class='Cifras' value='0' onKeyPress='return SoloNumeros(event)' readOnly><input type='hidden' name='hidEdOImporte' value=''>"
fila.appendChild(celda1);
fila.appendChild(celda2);
fila.appendChild(celda3);
fila.appendChild(celda4);
fila.appendChild(celda5);
miTabla.appendChild(fila);
}
}
function EliminaConcepto() {
var miTabla = document.getElementById("cuerpoTabla");
var i = 0;
do
if (miTabla.rows[i].getElementsByTagName("input")[0].checked == true)
miTabla.deleteRow(i);
else
i ++;
while (miTabla.rows.length != i)
RecalculaOtros();
}
</script>
</head>
<body>
<ilayer name="scroll1" width="100%" height=450 clip="0,0,170,150">
<div id="scroll3" style="width:100%;height:450;overflow:scroll">
<table cellpadding="0" cellspacing="0" border="0" width="780px" id="Grid">
<tr>
<td width="10px"> </td>
<td width="100px" align="center">Concepto</td>
<td width="260px" align="center">Descripcion</td>
<td width="80px" align="center">Cantidad</td>
<td width="130px" align="center">Precio</td>
<td width="25px" align="center"> </td>
<td width="125px" align="center">Importe</td>
</tr>
<tr><td colspan="7" height="3px"><hr color="#fff" size="2" >
<tr>
<td> </td>
<td valign="top"><div class="Concepto">OTROS
<input type="button" onclick="AgregaConcepto()" value=" + ">
<input type="button" onclick="EliminaConcepto()" value=" - "><div></td>
<td colspan="5" align="left" valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="left" style="padding-top:0px; margin-left:0px;margin-top:0px">
<tbody id=cuerpoTabla>
<tr id=a1>
<td width="287px"><input type=checkbox><input type="text" name="EdOConcepto" size="37"></td>
<td width="115px"><input type="text" name="EdOCantidad" class="Cifras" ></td>
<td width="108px"><input type="text" name="EdOPrecio" class="Cifras" ></td>
<td width="51px"> </td>
<td align="left"><input type="text" name="EdOImporte" size="10" class="Cifras" value="0" readOnly>
<input type="hidden" name="hidEdOImporte" value="">
</td>
</tr>
</table>
</tr>
</table>
</div>
</layer>
</body>
</html>
Si no quieres usar layers, puedes usar un iframe
Saludos