Каков наилучший способ удалить строку таблицы с помощью jQuery? - PullRequest
283 голосов
/ 05 октября 2008

Каков наилучший метод удаления строки таблицы с помощью jQuery?

Ответы [ 16 ]

2 голосов
/ 12 января 2013

Если строка, которую вы хотите удалить, может измениться, вы можете использовать это. Просто передайте этой функции строку #, которую вы хотите удалить.

function removeMyRow(docRowCount){
   $('table tr').eq(docRowCount).remove();
}
1 голос
/ 19 августа 2016

Я ценю, что это старый пост, но я пытался сделать то же самое и обнаружил, что принятый ответ не работает для меня. Предполагая, что JQuery перешел с того момента, как это было написано.

Во всяком случае, я обнаружил, что у меня работает следующее:

$('#resultstbl tr[id=nameoftr]').remove();

Не уверен, поможет ли это кому-нибудь. Мой пример выше был частью более крупной функции, поэтому не включал ее в прослушиватель событий.

1 голос
/ 06 мая 2013

если у вас есть HTML, как это

<tr>
 <td><span class="spanUser" userid="123"></span></td>
 <td><span class="spanUser" userid="123"></span></td>
</tr>

где userid="123" - это пользовательский атрибут, который можно динамически заполнять при создании таблицы,

вы можете использовать что-то вроде

  $(".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.');
            }
        }); 

     });

Так что в этом случае вы не знаете класс или идентификатор тега TR, но в любом случае вы можете удалить его.

1 голос
/ 11 октября 2008
$('tr').click(function()
 {
  $(this).remove();
 });

Я думаю, вы попробуете приведенный выше код, так как он работает, но я не знаю, почему он работает какое-то время, а затем вся таблица удаляется. Я также пытаюсь удалить строку, нажав на строку. но не смог найти точного ответа.

0 голосов
/ 30 мая 2018

Если вы используете Bootstrap Tables

добавьте этот фрагмент кода в ваш 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);
};

Тогда в вашем var allowedMethods = [

добавить 'removeRow'

Наконец, вы можете использовать $("#your-table").bootstrapTable('removeRow',{index:1});

Авторские права на этот пост

0 голосов
/ 06 октября 2017

id не является хорошим селектором сейчас. Вы можете определить некоторые свойства в строках. И вы можете использовать их в качестве селектора.

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

и вы можете использовать функцию для выбора строки, подобной этой (ES6):

const rowRemover = (category,type)=>{
   $(`tr[category=${category}][type=${type}]`).remove();
}

rowRemover('petshop','fish');
...