2010-01-20 40 views
5

Supongamos que tengo una tabla como éstatabla Eliminar fila usando jQuery

id name address  action 
-------------------------------------- 
s1 n1 a1  delete 
s2 n2 a2  delete 

de eliminación es un enlace, por ejemplo <a href="http://localhost/student/delete/1">. En el caso real, elimino al estudiante usando ajax. Para simplificar el código, acabo de alertar al enlace y omitir el script ajax. Solo quiero saber cómo eliminar una fila del documento html usando jquery.

$(document).ready(function() { 
$("a").click(function(event) { 
    alert("As you can see, the link no longer took you to jquery.com"); 
     var href = $(this).attr('href'); 
     alert(href); 
     event.preventDefault(); 
    }); 
); 

Deseo, Después de alertar al enlace, la fila seleccionada se eliminará automáticamente. ¿Hay alguna sugerencia sobre cómo implementar esta?

+1

Se puede publicar el código HTML? – rahul

+0

¿Desea eliminar la fila de la tabla de la base de datos o la tabla HTML? ¿O ambos? –

+0

@Douwe ¿Sabrías cómo eliminar la tabla html y de la base de datos? Acabo de encontrar esta pregunta cuando busco una respuesta para el mismo tipo de problema. –

Respuesta

17

No necesita llamar a preventDefault(). Simplemente devolver falso desde el controlador de eventos tiene el mismo efecto.

Para eliminar la fila donde se encuentra el enlace <a>, puede llamar $ (this) .closest ("tr") remove():.

$(document).ready(function() { 
$("a").click(function(event) { 
    alert("As you can see, the link no longer took you to jquery.com"); 
    var href = $(this).attr('href'); 
    alert(href); 
    $(this).closest("tr").remove(); // remove row 
    return false; // prevents default behavior 
    }); 
); 
+0

bueno ... no sabía acerca de 'más cercano' – psychotik

1

Agregue un identificador a cada <tr> llamado y añada una identificación 9714 al vínculo. Luego, en su controlador de evento click, llame al:

var thisId = $(this).attr('id'); 
$("#row_" + thisId).remove(); 

Nota - 9714 es solo una identificación ficticia. Solo use un número único aquí para cada fila.

+0

según usted, cuál es la mejor práctica. Utilizo la identificación ficticia como $ ("# row_" + thisId) .remove(); o utilizo el selector más cercano como $ (this) .closest ("tr"). Remove(); // eliminar la fila –

+0

Si bien esto funcionará, creo que esta solución es un poco exagerada. Se puede hacer mucho más limpio –

+0

¿por qué dijiste que la respuesta psicótica es exagerada? –

0

este ejemplo se quitan filas de una tabla con jQuery .

$(document).ready(function() { 
 
$("#my_table .remove_row").click(function() { 
 
\t $(this).parents("tr:first")[0].remove(); 
 
}); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table" border="1" id="my_table"> 
 
    <tbody> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td><button type="button" class="remove_row">X</button></td> 
 
     </tr> 
 
     <tr> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td><button type="button" class="remove_row">X</button></td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Cuestiones relacionadas