Який найкращий метод для видалення рядка таблиці за допомогою jQuery?
Відповіді:
Ти маєш рацію:
$('#myTableRow').remove();Це добре працює, якщо у рядку є такий id, як:
<tr id="myTableRow"><td>blah</td></tr>Якщо у вас немає id, ви можете використовувати будь-яку з безлічі селекторів jQuery .
$('#myTable tr').click(function(){
$(this).remove();
return false;
});Навіть кращий
$("#MyTable").on("click", "#DeleteButton", function() {
$(this).closest("tr").remove();
});Якщо припустити, що у вашій таблиці є кнопка / посилання всередині комірки даних, щось подібне дозволило б зробити трюк ...
$(".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();
});Сподіваюсь, що це допомагає ... Я трохи боровся з цим.
Ви можете використовувати:
$($(this).closest("tr"))для пошуку батьківського рядка таблиці елемента.
Це більш елегантно, ніж батько (). Батьків (), з чого я почав займатися, і незабаром дізнався про помилку своїх способів.
- редагувати - хтось зазначив, що питання стосується видалення рядка ...
$($(this).closest("tr")).remove()Як зазначено нижче, ви можете просто зробити:
$(this).closest('tr').remove();Подібний фрагмент коду може використовуватися для багатьох операцій, таких як події стрільби по декількох елементах.
$(this).closest("tr").remove()
Легко .. Спробуйте це
$("table td img.delete").click(function () {
$(this).parent().parent().parent().fadeTo(400, 0, function () {
$(this).remove();
});
return false;
});$(this).parent().parent().parent()на $(this).closest('tr'). Він більш надійний і чітко показує, що ви обираєте.
Чи прийнятно наступне:
$('#myTableRow').remove();function removeRow(row) {
$(row).remove();
}
<tr onmousedown="removeRow(this)"><td>Foo</td></tr>Можливо, щось подібне могло б також спрацювати? Я не намагався щось робити з "цим", тому не знаю, працює він чи ні.
Все, що вам потрібно зробити, - це видалити <tr>тег рядка таблиці ( ) зі своєї таблиці. Наприклад, ось код для видалення останнього рядка з таблиці:
$('#myTable tr:last').remove();
* Код, наведений вище, був взято з цього повідомлення про те, як користуватися jQuery Howto .
спробуйте це для розміру
$(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>Ще один автор empty():
$(this).closest('tr').empty();Якщо рядок, яку ви хочете видалити, може змінитися, ви можете скористатися цим. Просто передайте цій функції рядок, який ви хочете видалити.
function removeMyRow(docRowCount){
$('table tr').eq(docRowCount).remove();
}$('tr').click(function()
{
$(this).remove();
});Я думаю, ви спробуєте вищевказаний код, як він працює, але я не знаю, чому він працює колись, і тоді вся таблиця буде видалена. Я також намагаюся видалити рядок, натиснувши рядок. але не змогли знайти точної відповіді.
якщо у вас є такий 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тегу, але все одно ви можете його видалити.
Я ціную це старий пост, але я хотів зробити те саме, і виявив, що прийнята відповідь не працює для мене. Припускаючи, що JQuery пішов з моменту написання.
У всякому разі, я виявив, що для мене працювали:
$('#resultstbl tr[id=nameoftr]').remove();Не впевнений, чи це комусь допомагає. Мій приклад вище був частиною більшої функції, тому не перетворював її на слухача подій.
Якщо ви використовуєте таблиці Bootstrap
додайте цей фрагмент коду до 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});
Ідентифікатор зараз не гарний вибір. Ви можете визначити деякі властивості в рядках. І ви можете використовувати їх як селектор.
<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');Найпростіший спосіб видалення рядків із таблиці:
Наприклад:
<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