tabla dinamica

dimmi · #1 (**permalink**) 19/08/2003, 10:50

Hola que tal , quisiera realizar una tabla dinamica en mi pagina de manera que el usuario por medio de algun boton,enlace, etc, ligado a una funcion, pueda incrustar un renglon a la tabla, por medio de javacript lo podria hacer?

Beakdan · #2 (**permalink**) 19/08/2003, 16:11

Dimmi:

Este ejemplo te puede ayudar:

Código:

<html>
<head>
<title></title>
<style>
#TablaDatos{border:1px solid #000000;}
#TablaDatos td{border:1px solid #000000;}
#TablaDatos th{border:1px solid #000000;}
#TablaDatos input{border:0px}
</style>
<script languaje="javascript">
function agregaFila(){
	numFilas = document.getElementById('TablaDatos').rows.length;
	tempFila = document.getElementById('TablaDatos').insertRow(numFilas);

	celda1 = tempFila.insertCell(0);
	contText = document.createTextNode(numFilas);
	celda1.appendChild(contText);

	celda2 = tempFila.insertCell(1);
	campoCod = document.createElement('input');
	campoCod.setAttribute('name', 'codigo' + numFilas);
	celda2.appendChild(campoCod);

	celda3 = tempFila.insertCell(2);
	campoCant = document.createElement('input');
	campoCant.setAttribute('name', 'cantidad' + numFilas)
	campoCant.setAttribute('id', 'cantidad' + numFilas)
	celda3.appendChild(campoCant);

	celda3.onkeydown = tabulador;
}

teclaShift = false;
function shiftD(e){
	if (typeof e == "object"){
		event = e;
	}

	if(event.keyCode==16){
		if(event.type == "keydown"){
			teclaShift = true;
		}else{
			teclaShift = false;
		}
	}
}

function tabulador(e){
	var strID;
	if (typeof e == "object"){
		event = e;
	}

	if(event.keyCode==9 && !teclaShift){
		strID = ((typeof event.target) == "object")
				? event.target.id
				: event.srcElement.id;

		if(strID == "cantidad" +
		(document.getElementById('TablaDatos').rows.length-1))
			agregaFila();
	}
}

function inicializar(){
	document.onkeydown = shiftD;
	document.onkeyup = shiftD;
	document.form1.cantidad1.onkeydown = tabulador;
}

window.onload = inicializar;

</script>
</head>
<body bgcolor="#FFFFFF">
<form name="form1" action="" metod="get">
<table id="TablaDatos" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<th>&nbsp;</th>
		<th>Código</th>
		<th>Cantidad</th>
	</tr>
	<tr>
		<td>1</td>
		<td><input type="text" name="codigo1"></td>
		<td><input type="text" name="cantidad1" id="cantidad1"></td>
	</tr>
<table>
<input type="submit" value="Enviar">
<form>
</body>
</html>

Saludos.