borrar contenido

JoaCoLeO · #1 (**permalink**) 09/08/2012, 13:48

Lo que quiero lograr es que tengo una tabla completa con diferentes datos.

Es poder pasar el mouse por una fila y me aparesca un boton que me borre el contenido de esa fila...

En ejemplo es el nuevo correo de microsoft de @outlook para los que ya pasaron a la nueva vista es como se hace para borrar. Se pasa el mouse sobre la fila en si y te muestra una papelera.

Yo en este caso estoy usando la libreria prototype, en si quisiera hacerla con esa solo por el tema de no mezclar con otra libreria..

emprear · #2 (**permalink**) 10/08/2012, 22:35

En primer lugar, esto no es para el foro de html5, es una cuestión básica de javascript.
En segundo, no hace falta ninguna librería, prototype u otra.
Se utiliza el método deleteRow(), y el javascript no lleva más que un par de lineas de código

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">
<head>
<title> Borrar filas de tabla </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
    //<![CDATA[
function borrarFila(f){
var i=f.parentNode.parentNode.rowIndex;document.getElementById('tablaDatos').deleteRow(i);
}
  //]]>
</script>
</head>
<body>
 
<table id="tablaDatos" border="1" width="40%">
<tr>
  <th align="left" width="60%">Nombre</th>
  <th width="40%">&nbsp;</th>
</tr>
<tr>
  <td>Fila 1</td>
  <td><button onclick="borrarFila(this)">Borrar</button></td>
</tr>
<tr>
  <td>Fila 2</td>
  <td><button onclick="borrarFila(this)">Borrar</button></td>
</tr>
<tr>
  <td>Fila 3</td>
  <td><button onclick="borrarFila(this)">Borrar</button></td>
</tr>
</table>
</body>
</html>

JoaCoLeO · #3 (**permalink**) 13/08/2012, 08:36

Si de esa manera es como estoy borrando hoy en dia las filas..Mi consulta no es con que comando sino como mostrar un boton al pasar por la fila correspondiente segun donde se encuentra el mouse....

emprear · #4 (**permalink**) 13/08/2012, 09:20

Con un poquito de css lo conseguís

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">
<head>
<title> Borrar filas de tabla </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
.borrar{
visibility: hidden;
}
#tablaDatos tr:hover .borrar{
visibility: visible;
}
 
/*]]>*/
</style>
<script type="text/javascript">
    //<![CDATA[
function borrarFila(f){
var i=f.parentNode.parentNode.rowIndex;document.getElementById('tablaDatos').deleteRow(i);
}
  //]]>
</script>
</head>
<body>
 
<table id="tablaDatos" border="1" width="40%">
<tr>
  <th align="left" width="60%">Nombre</th>
  <th width="40%">&nbsp;</th>
</tr>
<tr>
  <td>Fila 1</td>
  <td><button onclick="borrarFila(this)" class="borrar">Borrar</button></td>
</tr>
<tr>
  <td>Fila 2</td>
  <td><button onclick="borrarFila(this)" class="borrar">Borrar</button></td>
</tr>
<tr>
  <td>Fila 3</td>
  <td><button onclick="borrarFila(this)" class="borrar">Borrar</button></td>
</tr>
</table>
</body>
</html>

Saludos

JoaCoLeO · #5 (**permalink**) 13/08/2012, 12:15

Muchas Gracias... Me sirvio pila....

Ya estaba ciego con eso, era tan facil pero me cerre totalmente je...

Desde ya muchas gracias...

emprear · #6 (**permalink**) 13/08/2012, 12:26

Cita:

Iniciado por JoaCoLeO

Muchas Gracias... Me sirvio pila....

Ya estaba ciego con eso, era tan facil pero me cerre totalmente je...

Desde ya muchas gracias...

A veces el árbol nos tapa el bosque
SAludos