Foros del Web » Programando para Internet » Javascript »

Añadir/Eliminar filas en una tabla

Estas en el tema de Añadir/Eliminar filas en una tabla en el foro de Javascript en Foros del Web. Buenas a todos, mi duda es la siguiente: Estoy haciendo una tabla en html y he asignado dos botones en la cabecera de la tabla ...
  #1 (permalink)  
Antiguo 05/07/2011, 04:56
cRz87
Invitado
 
Mensajes: n/a
Puntos:
Añadir/Eliminar filas en una tabla

Buenas a todos, mi duda es la siguiente:

Estoy haciendo una tabla en html y he asignado dos botones en la cabecera de la tabla que me permitan añadir/eliminar filas.
El problema es que me borra todas las filas de la tabla y no quiero que me borre ni la cabecera ni la primera fila.
Éste es mi código:

<html>
<head>
<title>
Articles
</title>
<script language=javaScript1.2>
function añadir()
{
var taulaArticles = document.getElementById("contingut");
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");
var celda6 = document.createElement("td");
var celda7 = document.createElement("td");


celda1.innerHTML = "<input type='text' name='codi'>";
celda2.innerHTML = "<input type='text' name='article'>";
celda3.innerHTML = "<input type='text' name='origen'>";
celda4.innerHTML = "<input type='checkbox' name='groc'>";
celda5.innerHTML = "<input type='text' name='preu'>";
celda6.innerHTML = "<input type='text' name='oferta'>";
celda7.innerHTML = "<input type='text' name='promocio'>";

fila.appendChild(celda1);
fila.appendChild(celda2);
fila.appendChild(celda3);
fila.appendChild(celda4);
fila.appendChild(celda5);
fila.appendChild(celda6);
fila.appendChild(celda7);
taulaArticles.appendChild(fila);
}
function borra()
{
var taulaArticles = document.getElementById ("contingut")
taulaArticles.deleteRow (taulaArticles.rows.length - 1)
}
</script>
</head>
<body style="color:blue" >
<table id=articles border=1 align="center">
<tbody id=contingut>
<tr id=header>
<th text-color="black" id=c1>Codi</th>
<th id=c2>Article</th>
<th id=c3>Origen</th>
<th id=c4>Groc</th>
<th id=c5>Preu</th>
<th id=c6>Oferta</th>
<th id=c7>Promoció</th>
<th id=c8><button OnClick=añadir()>+</button><button OnClick=borrar()>-</button></th>
</tr>
<tr id=r1>
<td id=r1c1>
<input type="text" name="codi"/>
</td>

<td id=r1c2>
<input type="text" name="article">
</td>

<td id=r1c3>
<input type="text" name="origen">
</td>

<td id=r1c4>
<input type="checkbox" name="groc">
</td>

<td id=r1c5>
<input type="text" name="preu">
</td>

<td id=r1c6>
<input type="text" name="oferta">
</td>

<td id=r1c7>
<input type="text" name="promocio">
</td>
</tr>
</table>
</body>
</html>



Espero que podais ayudarme, gracias de antemano!

Saludos,
  #2 (permalink)  
Antiguo 05/07/2011, 10:37
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años
Puntos: 1485
Respuesta: Añadir/Eliminar filas en una tabla

buenas,
en tal caso podrías trabajar con una sección específica de la tabla. nótese en el ejemplo el contenido de la tabla esta dentro de <tbody>. puedes tener más de un <tbody> en una misma tabla. o incluso puedes tener un <thead> el cual solo contenga la cabecera y la primera fila de la tabla. luego solo operas directamente con el <tbody>.

__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #3 (permalink)  
Antiguo 06/07/2011, 01:22
cRz87
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Añadir/Eliminar filas en una tabla

Muchas gracias!! no se si era lo que me has dicho, pero he puesto el tbody seguidamente después de la tabla y me funciona perfectamente, gran ayuda!!

Saludos y mil gracias!

Etiquetas: filas, tabla
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:55.