javascript - una - tablas dinamicas html jquery




¿Cuál es la mejor manera de eliminar una fila de la tabla con jQuery? (11)

¿Cuál es el mejor método para eliminar una fila de la tabla con jQuery?


Aprecio que este es un post antiguo, pero buscaba hacer lo mismo y descubrí que la respuesta aceptada no me funcionó. Suponiendo que JQuery se haya movido desde que esto fue escrito.

De todos modos, encontré lo siguiente trabajado 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 estaba envuelto en un detector de eventos.


Es aceptable lo siguiente:

$('#myTableRow').remove();

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('petshot','fish');

Otro por empty() :

$(this).closest('tr').empty();

Si está utilizando las tablas de Bootstrap

agrega este fragmento de código a tu 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);
};

Luego en tu var allowedMethods = [

añadir 'removeRow'

Finalmente, puede usar $("#your-table").bootstrapTable('removeRow',{index:1});

Créditos a esta publicación.


Si la fila que desea eliminar puede cambiar, puede usar esto. Simplemente pase esta función a la fila # que desea eliminar.

function removeMyRow(docRowCount){
   $('table tr').eq(docRowCount).remove();
}

Suponiendo que tenga 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 elemento primario del elemento principal del botón / enlace en el que se hace clic. Necesita 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 al que se hace clic, así 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 modificarlo fácilmente para avisar al usuario o trabajar solo haciendo doble clic:

$(".delete").live('click', function(event) {
    $(this).parent().remove();
});

Espero que ayude ... luché en esto un poco yo mismo.


Tienes razón:

$('#myTableRow').remove();

Esto funciona bien si su fila tiene una id , como por ejemplo:

<tr id="myTableRow"><td>blah</td></tr>

Si no tiene una id , puede usar cualquiera de los numerosos selectores de jQuery.


prueba esto por tamaño

$(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>

verlo en acción


$('#myTable tr').click(function(){
    $(this).remove();
    return false;
});

function removeRow(row) {
    $(row).remove();
}

<tr onmousedown="removeRow(this)"><td>Foo</td></tr>

Tal vez algo como esto podría funcionar también? No he intentado hacer algo con "esto", así que no sé si funciona o no.





html-table