Каков наилучший метод для удаления строки таблицы с помощью jQuery?
Каков наилучший способ удалить строку таблицы с помощью jQuery?
Ответ 1
Вы правы:
$('#myTableRow').remove();
Это отлично работает, если ваша строка имеет id, например:
<tr id="myTableRow"><td>blah</td></tr>
Если у вас нет id, вы можете использовать любое из jQuery множество селекторов.
Ответ 2
Если вы собираетесь использовать jQuery, используйте jQuery man!
$('#myTable tr').click(function(){
$(this).remove();
return false;
});
Ответ 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();
});
Надеюсь, что это поможет... Я немного потрудился над этим.
Ответ 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
Все, что вам нужно сделать, это удалить тег таблицы (<tr>) из вашей таблицы. Например, вот код для удаления последней строки из таблицы:
$('#myTable tr:last').remove();
* Код выше был взят из этот jQuery Howto post.
Ответ 7
function removeRow(row) {
$(row).remove();
}
<tr onmousedown="removeRow(this)"><td>Foo</td></tr>
Может быть, что-то подобное может работать? Я не пробовал что-то делать с "this", поэтому я не знаю, работает оно или нет.
Ответ 8
попробуйте это для размера
$(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>
Ответ 9
Является ли приемлемым следующее:
$('#myTableRow').remove();
Ответ 10
Другой empty():
$(this).closest('tr').empty();
Ответ 11
Если строка, которую вы хотите удалить, может измениться, вы можете ее использовать. Просто передайте этой функции строку #, которую вы хотите удалить.
function removeMyRow(docRowCount){
$('table tr').eq(docRowCount).remove();
}
Ответ 12
$('tr').click(function()
{
$(this).remove();
});
Я думаю, вы попробуете приведенный выше код, так как он работает, но я не знаю, почему он работает когда-то, а затем удаляется вся таблица. Я также пытаюсь удалить строку, щелкнув строку. но не смог найти точного ответа.
Ответ 13
если у вас есть такой 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, но в любом случае вы можете его удалить.
Ответ 14
Я ценю, что это старый пост, но я искал сделать то же самое и нашел, что принятый ответ не сработал у меня. Предполагая, что JQuery переместился, поскольку это было написано.
Во всяком случае, я обнаружил, что для меня это работало:
$('#resultstbl tr[id=nameoftr]').remove();
Не уверен, что это кому-то поможет. Мой пример выше был частью большей функции, поэтому не завершал его в прослушиватель событий.
Ответ 15
Я использовал это в моем коде:
> $("#tbl").on("click", ".delete-row", function () {
> $(this).closest('tr').remove();
> });
Ответ 16
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>
и вы можете использовать func для выбора строки, подобной этой (ES6):
const rowRemover = (category,type)=>{
$('tr[category=${category}][type=${type}]').remove();
}
rowRemover('petshot','fish');