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

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

283 голосов
/ 05 октября 2008

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

Ответы [ 16 ]

396 голосов
/ 05 октября 2008

Ты прав: 

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

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

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

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

97 голосов
/ 05 октября 2008 
$('#myTable tr').click(function(){
    $(this).remove();
    return false;
});
56 голосов
/ 29 марта 2009

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

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

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

$(this).remove();

Пока это удалит ячейку данных: 

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

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

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

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

40 голосов
/ 24 ноября 2009

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

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

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

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

- Правка - Кто-то указал, что речь идет об удалении строки ... 

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

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

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

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

15 голосов
/ 11 января 2010

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

$("table td img.delete").click(function () {
    $(this).parent().parent().parent().fadeTo(400, 0, function () { 
        $(this).remove();
    });
    return false;
});
9 голосов
/ 05 октября 2008

Допустимо ли следующее: 

$('#myTableRow').remove();
8 голосов
/ 02 мая 2009

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

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

* Код выше был взят из этого jQuery Howto post .

8 голосов
/ 05 октября 2008 
function removeRow(row) {
    $(row).remove();
}

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

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

7 голосов
/ 31 октября 2010

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

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

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

4 голосов
/ 21 мая 2015

Еще один empty(): 

$(this).closest('tr').empty();
Страница:
...