¿Cuál es el mejor método para eliminar una fila de tabla con jQuery?
Respuestas:
Tienes razón:
$('#myTableRow').remove();Esto funciona bien si su fila tiene un id, como:
<tr id="myTableRow"><td>blah</td></tr>Si no tiene uno id, puede usar cualquiera de los muchos selectores de jQuery .
$('#myTable tr').click(function(){
$(this).remove();
return false;
});Incluso uno mejor
$("#MyTable").on("click", "#DeleteButton", function() {
$(this).closest("tr").remove();
});Suponiendo que tiene un botón / enlace dentro de una celda de datos en su tabla, algo como esto haría el truco ...
$(".delete").live('click', function(event) {
$(this).parent().parent().remove();
});Esto eliminará el padre del padre del botón / enlace en el que se hace clic. Debe usar parent () porque es un objeto jQuery, no un objeto DOM normal, y necesita usar parent () dos veces, porque el botón vive dentro de una celda de datos, que vive dentro de una fila ... que es lo que quieres eliminar $ (este) es el botón en el que se hace clic, por lo que simplemente tener algo como esto eliminará solo el botón:
$(this).remove();Si bien esto eliminará la celda de datos:
$(this).parent().remove();Si desea simplemente hacer clic en cualquier lugar de la fila para eliminarlo, algo como esto funcionaría. Puede modificar esto fácilmente para solicitar al usuario o trabajar solo con un doble clic:
$(".delete").live('click', function(event) {
$(this).parent().remove();
});Espero que ayude ... Luché un poco por esto.
Puedes usar:
$($(this).closest("tr"))para encontrar la fila de la tabla primaria de un elemento.
Es más elegante que parent (). Parent (), que es lo que comencé a hacer y pronto aprendí el error de mis costumbres.
--Editar - Alguien señaló que la pregunta era sobre eliminar la fila ...
$($(this).closest("tr")).remove()Como se señala a continuación, simplemente puede hacer:
$(this).closest('tr').remove();Se puede usar un fragmento de código similar para muchas operaciones, como disparar eventos en varios elementos.
$(this).closest("tr").remove()
Fácil .. Prueba esto
$("table td img.delete").click(function () {
$(this).parent().parent().parent().fadeTo(400, 0, function () {
$(this).remove();
});
return false;
});$(this).parent().parent().parent()a $(this).closest('tr'). Es más robusto y muestra claramente lo que está seleccionando.
¿Es aceptable lo siguiente?
$('#myTableRow').remove();function removeRow(row) {
$(row).remove();
}
<tr onmousedown="removeRow(this)"><td>Foo</td></tr>¿Quizás algo como esto podría funcionar también? No he intentado hacer algo con "esto", así que no sé si funciona o no.
Todo lo que tiene que hacer es eliminar la <tr>etiqueta de fila de la tabla ( ) de su tabla. Por ejemplo, aquí está el código para eliminar la última fila de la tabla:
$('#myTable tr:last').remove();
* El código anterior se tomó de esta publicación de jQuery Howto .
prueba esto por talla
$(this).parents('tr').first().remove();listado completo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.deleteRowButton').click(DeleteRow);
});
function DeleteRow()
{
$(this).parents('tr').first().remove();
}
</script>
</head>
<body>
<table>
<tr><td>foo</td>
<td><a class="deleteRowButton">delete row</a></td></tr>
<tr><td>bar bar</td>
<td><a class="deleteRowButton">delete row</a></td></tr>
<tr><td>bazmati</td>
<td><a class="deleteRowButton">delete row</a></td></tr>
</table>
</body>
</html>Otro por empty():
$(this).closest('tr').empty();Si la fila que desea eliminar puede cambiar, puede usar esto. Simplemente pase esta función el número de fila que desea eliminar.
function removeMyRow(docRowCount){
$('table tr').eq(docRowCount).remove();
}$('tr').click(function()
{
$(this).remove();
});Creo que probará el código anterior, ya que funciona, pero no sé por qué funciona por algún tiempo y luego se elimina toda la tabla. También estoy tratando de eliminar la fila haciendo clic en la fila. pero no pudo encontrar la respuesta exacta.
si tienes HTML como este
<tr>
<td><span class="spanUser" userid="123"></span></td>
<td><span class="spanUser" userid="123"></span></td>
</tr>dónde userid="123" es un atributo personalizado que puede rellenar dinámicamente cuando crea la tabla,
puedes usar algo como
$(".spanUser").live("click", function () {
var span = $(this);
var userid = $(this).attr('userid');
var currentURL = window.location.protocol + '//' + window.location.host;
var url = currentURL + "/Account/DeleteUser/" + userid;
$.post(url, function (data) {
if (data) {
var tdTAG = span.parent(); // GET PARENT OF SPAN TAG
var trTAG = tdTAG.parent(); // GET PARENT OF TD TAG
trTAG.remove(); // DELETE TR TAG == DELETE AN ENTIRE TABLE ROW
} else {
alert('Sorry, there is some error.');
}
});
});Entonces, en ese caso, no conoce la clase o la identificación de la TRetiqueta, pero de todos modos puede eliminarla.
Aprecio que esta es una publicación antigua, pero estaba buscando hacer lo mismo, y encontré que la respuesta aceptada no funcionó para mí. Asumiendo que JQuery ha seguido adelante desde que esto fue escrito.
De todos modos, encontré que lo siguiente funcionó para mí:
$('#resultstbl tr[id=nameoftr]').remove();No estoy seguro si esto ayuda a alguien. Mi ejemplo anterior era parte de una función más grande, por lo que no lo incluí en un detector de eventos.
Si está utilizando tablas de Bootstrap
agregue este fragmento de código a su bootstrap_table.js
BootstrapTable.prototype.removeRow = function (params) {
if (!params.hasOwnProperty('index')) {
return;
}
var len = this.options.data.length;
if ((params.index > len) || (params.index < 0)){
return;
}
this.options.data.splice(params.index, 1);
if (len === this.options.data.length) {
return;
}
this.initSearch();
this.initPagination();
this.initBody(true);
};Entonces en tu var allowedMethods = [
añadir 'removeRow'
Finalmente puedes usar $("#your-table").bootstrapTable('removeRow',{index:1});
id no es un buen selector ahora. Puede definir algunas propiedades en las filas. Y puedes usarlos como selector.
<tr category="petshop" type="fish"><td>little fish</td></tr>
<tr category="petshop" type="dog"><td>little dog</td></tr>
<tr category="toys" type="lego"><td>lego starwars</td></tr>y puede usar una función para seleccionar la fila como esta (ES6):
const rowRemover = (category,type)=>{
$(`tr[category=${category}][type=${type}]`).remove();
}
rowRemover('petshop','fish');El método más fácil para eliminar filas de la tabla:
Por ejemplo:
<table id='myTable' border='1'>
<tr id='tr1'><td>Row1</td></tr>
<tr id='tr2'><td>Row2</td></tr>
<tr id='tr3'><td>Row3</td></tr>
<tr id='tr4'><td>Row4</td></tr>
<tr id='tr5'><td>Row5</td></tr>
</table>
//======REMOVE TABLE ROW=========
//1. remove spesific row using its ID
$('#tr1').remove();
//2. remove spesific row using its order or index.
//row index started from 0-n. Row1 index is 0, Row2 index is 1 and so on.
$('#myTable').find('tr:eq(2)').remove();//removing Row3