¿Como seleccionar una fila de una tabla para borrarla?

dandreta · #1 (**permalink**) 09/05/2007, 04:55

Hola!!

Tengo una tabla con diferentes filas y quiero saber como puedo seleccionar una fila pincando con el ratón y que luego pulsando un botón eliminar se borre esa fila.

Saludos!!

caricatos · #2 (**permalink**) 09/05/2007, 08:01

Hola:

Supongo que tienes una tabla con filas y celdas... para hacer una selección (coloreándola) puedes simplemente cambiar de color toda la fila pinchándola...

<tr onclick="this.style.backgroundColor = 'red'"... >

...pero para borrar "luego"... supuestamente habrá un botón "eliminar selecionados"... Habría que recorrer las celdas buscando los seleccionados...

Desde cero es un poco compleja la solución...
¿Por qué no pones el código que tienes... ?

Si tienes paciencia puedes mirar el código de esta página: http://www.caricatos.net/citas/consulta.php pero no se borran las filas (me ha costado algunos años recopilar las citas...) con javascript se pueden borrar u ocultar elementos (celdas, capas, imágenes...) y según tu intención puede interesar una u otra cosa...

Saludos

dandreta · #3 (**permalink**) 09/05/2007, 09:21

Hola

Este es el código que tengo:

Código HTML:

<table>
	<tr>
	<td>Curso</td>
	<td>Asignatura</td>
	<td>Convocatoria</td>
	<td>Nota</td>
	<td>N&ordm; Cr&eacute;ditos</td>
	</tr>
	<tr>
	<td>2</td>
	<td>Programaci&oacute;n II</td>
	<td>3</td>
	<td>7</td>
	<td>7.5</td>
	</tr>
	</table>
	
	<table>
	<tr>
	<td><input type=button value="A&ntilde;adir"></td>
	<td><input type=button value="Borrar"></td>
	<td><input type=button value="Modificar"></td>
	</tr>
	</table>

Me interesa que se borre la fila, no que se oculte. Seria seleccionar una fila,excepto la del titulo, y luego al pulsar el botón borrar se elimine esa fila.

Como ves tengo mas botones:

El botón modificar seria parecido, se seleccionaria la fila y luego pulsando el boton modificar, nos situariamos sobre la fila seleccionada pudiendo cambiar el texto de las celdas, aunque esto no se si podra hacer.

Al pulsar el botón añadir, se crearia una nueva fila en la tabla para que se puedan meter datos en esa fila.

En lo que me puedas ayudar estaria agradecido.
Saludos!!

calvin_naranjo · #4 (**permalink**) 10/05/2007, 10:08

Hola, lo que yo hago es colocar un objeto tipo checkbox y despues recorro a ver cual debe de ser borrado borrarlo depende del navegador que estes usando.

Mira este laboratorio: http://sentidoweb.com/2006/09/19/lab...javascript.php

dandreta · #5 (**permalink**) 18/05/2007, 06:49

Hola!

Siento haber tardado tanto en contestar, pero he estado bastante liado.

He estado revisando los enlaces que me habeis dado, y he llegado a la conclusión que es más sencillo y practico para el usuario poner en cada fila un checkbox y despues recorrer la tabla para ver cuales estan seleccionados y borrarlos, como me decias calvin_naranjo. Si me puedes postear el script para borrar los checkbox seleccionados me harias un gran favor.

Saludos

JavierB · #6 (**permalink**) 18/05/2007, 10:08

Hola dandreta

Prueba esto:

Código PHP:

  <html>
<head>
<script type="text/javascript">
function borrar() {
  tab = document.getElementById('tabla');
  for (i=tab.getElementsByTagName('input').length-1; i>=0; i--) {
    chk = tab.getElementsByTagName('input')[i];
    if (chk.checked)
      tab.removeChild(chk.parentNode.parentNode);
  }
}
</script>
</head>
<body>
<table>
<tbody id="tabla">
<tr>
<td>aaa</td><td>aaa</td><td><input type="checkbox" /></td>
<tr>
<tr>
<td>bbb</td><td>bbb</td><td><input type="checkbox" /></td>
<tr>
<tr>
<td>ccc</td><td>ccc</td><td><input type="checkbox" /></td>
<tr>
</tbody>
</table>
<input type="button" value="Borrar" onclick="borrar()" />
</body>
</html>

Saludos,

dandreta · #7 (**permalink**) 19/05/2007, 05:43

Gracias por tu código JavierB, me ha funcionado bien

Saludos

derkenuke · #8 (**permalink**) 19/05/2007, 08:26

Podría ser una cosa así (no he hecho el modificar):

Código PHP:

  <table border="1" id="tabla">
    <tr>
        <td>Curso</td><td>Asignatura</td><td>Convocatoria</td><td>Nota</td><td>N&ordm; Cr&eacute;ditos</td>
    </tr>
    <tr>
        <td>2</td><td>Programaci&oacute;n II</td><td>3</td><td>7</td><td>7.5</td>
    </tr>
    <tr>
        <td>1</td><td>A</td><td>3</td><td>7</td><td>4</td>
    </tr>
    <tr>
        <td>2</td><td>X</td><td>3</td><td>5</td><td>7.5</td>
    </tr>
    <tr>
        <td>1</td><td>Y</td><td>3</td><td>1</td><td>7.0</td>
    </tr>
    <tr>
        <td>2</td><td>O</td><td>3</td><td>NP</td><td>3</td>
    </tr>
    </table>
    
    <table>
    <tr>
        <td><input type=button value="A&ntilde;adir" onclick="anadir()"></td>
        <td><input type=button value="Borrar" onclick="eliminar()"></td>
        <td><input type=button value="Modificar"></td>
    </tr>
</table>



<script type="text/javascript">

var seleccionado=null;            //contiene la fila seleccionada

function onclickHandler() {
        if(seleccionado==this) {
            this.style.backgroundColor="transparent";
            seleccionado=null;
        }
        else {
            if(seleccionado!=null) 
                seleccionado.style.backgroundColor="transparent";
            this.style.backgroundColor="#e0b";
            seleccionado=this;
        }
        
    }

var filas=document.getElementById("tabla").getElementsByTagName("tr");
for(var i=0; i<filas.length; i++) {
    filas[i].onclick=onclickHandler;
}


function anadir() {
    var tr=document.createElement("TR");
    var celdas=["Curso","Asignatura","Convocatoria","Nota","Número Créditos"];
    for( var i in celdas ) {
        var td=document.createElement("TD");
        var txt=document.createTextNode( window.prompt(celdas[i],"a") );
        td.appendChild(txt);
        tr.appendChild(td);
    }
    tr.onclick=onclickHandler;
    document.getElementById("tabla").appendChild(tr);
}

function eliminar() {
    if(seleccionado==null) return alert("Seleccione una fila haciendo click sobre ella");
    seleccionado.parentNode.removeChild(seleccionado);
}

</script>

A ver si te gusta.

Saludos.

rogoelpra · #9 (**permalink**) 19/05/2007, 09:46

Esta muy Bueno, Pero si lo que necesito no es eliminarla sino cambiarla de Lugar, es decir ubicar las seleccionadas en la Parte superior o inferior de la Tabla... Puede esto hacerse?...

... Gracias...