Jaki jest najlepszy sposób na usunięcie wiersza tabeli za pomocą jQuery?
Jaka jest najlepsza metoda usuwania wiersza tabeli za pomocą jQuery?
17 answers
Masz rację:
$('#myTableRow').remove();
To działa dobrze, jeśli twój wiersz ma id, takie jak:
<tr id="myTableRow"><td>blah</td></tr>
Jeśli nie masz id, możesz użyć dowolnego z jQuery mnóstwa selektorów .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-05-16 00:17:54
Jeśli chcesz używać jQuery, użyj jQuery man!
$('#myTable tr').click(function(){
$(this).remove();
return false;
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-23 09:53:13
Zakładając, że masz przycisk / link w komórce danych w tabeli, coś takiego załatwiłoby sprawę...
$(".delete").live('click', function(event) {
$(this).parent().parent().remove();
});
Spowoduje usunięcie rodzica rodzica klikniętego przycisku / łącza. Musisz użyć parent (), ponieważ jest to obiekt jQuery, a nie zwykły obiekt DOM, i musisz użyć parent() dwa razy, ponieważ przycisk mieszka wewnątrz komórki danych, która mieszka w wierszu....co chcesz usunąć. $(to) jest przycisk kliknięty, więc po prostu mając coś tak jak to usunie tylko przycisk:
$(this).remove();
Podczas gdy spowoduje to usunięcie komórki danych:
$(this).parent().remove();
Jeśli chcesz po prostu kliknąć gdziekolwiek w wierszu, aby go usunąć, coś takiego zadziała. Możesz łatwo zmodyfikować to, aby monitować użytkownika lub pracować tylko przy podwójnym kliknięciu:
$(".delete").live('click', function(event) {
$(this).parent().remove();
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-03-29 05:05:48
Możesz użyć:
$($(this).closest("tr"))
Do znajdowania nadrzędnego wiersza tabeli elementu.
Jest bardziej elegancki niż parent ().rodzic (), czyli to, co zacząłem robić i wkrótce nauczyłem się błędów moich sposobów.
--edytuj -- Ktoś zwrócił uwagę, że pytanie dotyczyło usunięcia wiersza...
$($(this).closest("tr")).remove()
Jak zaznaczono poniżej, możesz po prostu zrobić:
$(this).closest('tr').remove();
Podobny urywek kodu może być używany do wielu operacji, takich jak wywołanie zdarzeń na wielu elementach.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-07-04 15:49:46
Spokojnie.. Try this
$("table td img.delete").click(function () {
$(this).parent().parent().parent().fadeTo(400, 0, function () {
$(this).remove();
});
return false;
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-01-11 05:58:37
Wszystko, co musisz zrobić, to usunąć znacznik table row (<tr>) z tabeli. Na przykład tutaj jest kod do usunięcia ostatniego wiersza z tabeli:
$('#myTable tr:last').remove();
*powyższy kod został zaczerpnięty z this jQuery Howto post.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-05-02 10:02:49
function removeRow(row) {
$(row).remove();
}
<tr onmousedown="removeRow(this)"><td>Foo</td></tr>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-04 21:48:55
Spróbuj tego rozmiaru
$(this).parents('tr').first().remove();
Pełna lista:
<!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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-25 11:14:39
Jest następujące dopuszczalne:
$('#myTableRow').remove();
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-04 21:04:56
Kolejny przez empty():
$(this).closest('tr').empty();
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-18 09:35:38
Jeśli wiersz, który chcesz usunąć, może się zmienić, możesz go użyć. Wystarczy przekazać tę funkcję wiersz #, który chcesz usunąć.
function removeMyRow(docRowCount){
$('table tr').eq(docRowCount).remove();
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-11 20:46:04
$('tr').click(function()
{
$(this).remove();
});
Myślę, że wypróbujesz powyższy kod, ponieważ działa, ale nie wiem, dlaczego działa przez jakiś czas, a potem cała tabela jest usuwana. próbuję również usunąć wiersz, klikając wiersz. ale nie mógł znaleźć dokładnej odpowiedzi.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-05 02:29:44
Jeśli masz taki HTML
<tr>
<td><span class="spanUser" userid="123"></span></td>
<td><span class="spanUser" userid="123"></span></td>
</tr>
Gdzie {[2] } jest niestandardowym atrybutem, który można dynamicznie wypełniać podczas budowania tabeli,
Możesz użyć czegoś takiego jak
$(".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.');
}
});
});
Więc w takim przypadku nie znasz klasy ani identyfikatora tagu TR, ale i tak możesz go usunąć.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-06 12:44:45
Doceniam to jest stary post, ale chciałem zrobić to samo, i okazało się, że zaakceptowana odpowiedź nie działa dla mnie. Zakładając, że JQuery ruszyło do przodu, odkąd to zostało napisane.
W każdym razie, znalazłem następujące działa dla mnie:
$('#resultstbl tr[id=nameoftr]').remove();
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-19 12:55:30
Użyłem tego w kodzie:
> $("#tbl").on("click", ".delete-row", function () {
> $(this).closest('tr').remove();
> });
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-06 08:01:28
Id nie jest teraz dobrym selektorem. Możesz zdefiniować niektóre właściwości w wierszach. I możesz użyć ich jako selektora.
<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>
I możesz użyć func, aby wybrać wiersz w ten sposób (ES6):
const rowRemover = (category,type)=>{
$('tr[category=${category}][type=${type}]').remove();
}
rowRemover('petshot','fish');
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-06 08:12:40
Jeśli używasz tabel Bootstrap
Dodaj ten fragment kodu do 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);
};
Następnie w Twoim var allowedMethods = [
Dodaj 'removeRow'
Wreszcie możesz użyć $("#your-table").bootstrapTable('removeRow',{index:1});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-30 17:35:19