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

ProgramBox

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

Post author:admin
Запись опубликована:10 января, 2022
Post category:Вопросы по программированию

#javascript #jquery #html-table

Вопрос:

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

Ответ №1:

Вы правы:

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

Это отлично работает , если в вашей строке есть id , например:

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

Если у вас его нет id , вы можете использовать любой из множества селекторов jQuery.

1. Да, я предполагал, что у строки есть идентификатор, и у вас есть идентификатор 🙂

2. Выполнение этого таким образом означает, что вам нужен один идентификатор на строку, что потенциально добавляет много накладных расходов. jQuery допускает другие подходы, которые являются более идиоматичными (для подхода jQuery), продолжайте читать, есть больше предложений.

3. Отлично сработало для меня, так как я смог поместить уникальный идентификатор в каждую строку.

4. Потрясающая штука! jQuery-это будущее!

5. «Шеф, что такое изобилие?»

Ответ №2:

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

Даже лучше

 $("#MyTable").on("click", "#DeleteButton", function() {
   $(this).closest("tr").remove();
});

1. Странно, но ваше решение бесконечно лучше, чем принятое.

2. @йорг, просто чтобы упомянуть об этом, у вас есть опечатка в вашем ответе, после .click вы должны поставить функцию() перезвонить

3. также $(это).ближайший(‘tr’).удалить();

4. лучшая версия на самом деле лучше

Ответ №3:

Предполагая, что у вас есть кнопка/ссылка внутри ячейки данных в вашей таблице, что-то подобное сделает свое дело…

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

Это приведет к удалению родителя родителя нажатой кнопки/ссылки. Вам нужно использовать parent (), потому что это объект jQuery, а не обычный объект DOM, и вам нужно использовать parent() дважды, потому что кнопка находится внутри ячейки данных, которая находится внутри строки….это то, что вы хотите удалить. $(это) — это нажатая кнопка, поэтому простое наличие чего-то подобного приведет к удалению только кнопки:

 $(this).remove();

В то время как это приведет к удалению ячейки данных:

     $(this).parent().remove();

Если вы хотите просто щелкнуть в любом месте строки, чтобы удалить ее, что-то подобное сработает. Вы можете легко изменить это, чтобы запрашивать пользователя или работать только двойным щелчком мыши:

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

Надеюсь, это поможет…Я и сам немного поборолся с этим.

1. Что делать, если ссылка не находится непосредственно внутри td, но имеет, скажем, промежуток вокруг нее? Я думаю, что было бы лучше сделать $(это).parents(‘tr’).удалить(); позволить ему самостоятельно подняться по дереву DOM, найти tr и удалить его.

2. Это тоже сработало бы. Все зависит от того, где в DOM находится ваша кнопка/ссылка, поэтому я привел так много примеров и такое длинное объяснение.

3. Вы также можете использовать $(this).parents(‘tr’)

4. .live был устаревшим в jQuery 1.7 и удален в 1.9. См. jQuery.live

Ответ №4:

Вы можете использовать:

 $($(this).closest("tr"))

для поиска строки родительской таблицы элемента.

Это более элегантно, чем parent().parent (), что я начал делать и вскоре понял, в чем моя ошибка.

—Редактировать-Кто-то указал, что вопрос касался удаления строки…

 $($(this).closest("tr")).remove()

Как указано ниже, вы можете просто сделать:

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

Аналогичный фрагмент кода можно использовать для многих операций, таких как запуск событий на нескольких элементах.

Ответ №5:

Легко.. Попробуй это

 $("table td img.delete").click(function () {
    $(this).parent().parent().parent().fadeTo(400, 0, function () { 
        $(this).remove();
    });
    return false;
});

Ответ №6:

Приемлемо ли следующее:

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

Ответ №7:

Все, что вам нужно сделать, это удалить тег строки таблицы ( <tr> ) из вашей таблицы. Например, вот код для удаления последней строки из таблицы:

$('#myTable tr:last').remove();

*Приведенный выше код был взят из этого поста jQuery Howto.

Ответ №8:

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

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

Может быть, что-то подобное тоже может сработать? Я не пробовал что-то делать с «этим», поэтому не знаю, работает это или нет.

Ответ №9:

попробуйте это для размера

 $(this).parents('tr').first().remove();

полный список:

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

увидеть это в действии

Ответ №10:

Еще один по empty() :

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

Ответ №11:

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

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

Ответ №12:

если у вас есть такой 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 тега, но в любом случае вы можете удалить его.

Ответ №13:

 $('tr').click(function()
 {
  $(this).remove();
 });

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

Ответ №14:

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

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

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

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

Ответ №15:

Если вы используете таблицы начальной загрузки

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

Кредиты на этот пост

Ответ №16:

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

 <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');

Ответ №17:

Самый простой способ удалить строки из таблицы:

Удалите строку таблицы, используя ее уникальный идентификатор.
Удалить на основе порядка/индекса этой строки. Пример: удалите третий или пятый ряд.

Например:

  <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

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