1. Dom
  2. Pytanie i odpowiedź
  3. Jaki jest najlepszy sposób na usunięcie wiersza tabeli z jQuery?

Jaki jest najlepszy sposób na usunięcie wiersza tabeli z jQuery?

2008-10-04 14 views

Odpowiedz

341

Masz rację:

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

Działa to dobrze, czy rząd ma id, takich jak:

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

Jeśli nie posiadasz id, możesz użyć dowolnego z jQuery's .

Źródło

2008-10-04 21:11:49 imjoevasquez

+0

Tak, zakładałem, że wiersz ma identyfikator i masz identyfikator :) –

+2

Wykonanie tego w ten sposób oznacza, że ​​potrzebujesz jednego identyfikatora w wierszu, co potencjalnie zwiększa obciążenie. jQuery pozwala na inne podejścia, które są bardziej idiomatyczne (do podejścia jQuery), kontynuuj czytanie, jest więcej sugestii. –

+0

Sprawdziło się doskonale, ponieważ udało mi się umieścić unikatowy identyfikator w każdym rzędzie. –

6

jest następujące dopuszczalne:

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

Źródło

2008-10-04 21:04:56

+3

Tak, jest to do zaakceptowania! – kamalpreet

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

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

Może coś takiego może również zadziałać? Nie próbowałem robić czegoś z "tym", więc nie wiem, czy to działa, czy nie.

Źródło

2008-10-04 21:48:55 Eikern

+1

Cóż, powiedziałbym, że byłoby trochę dziwnie, gdyby rząd zniknął po kliknięciu. W tej chwili mam link w wierszu, aby usunąć wiersz. –

82

@Eikern

Jeśli masz zamiar użyć jQuery użyć jQuery człowieka!

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

Źródło

2008-10-05 01:07:26 nickf

+0

miło, bardzo nie instrusive – imjoevasquez

+3

Dziwne, twoje rozwiązanie jest nieskończenie lepsze od zaakceptowanego. – Puzbie

+3

@jorg, żeby o tym wspomnieć, masz literówkę w odpowiedzi, po .click musisz umieścić funkcję() oddzwonić – Franco

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

myślę, że będzie próbować powyższy kod, jak to działa, ale nie wiem, dlaczego to działa na jakiś czas, a potem cały stół jest usuwany. Próbuję też usunąć wiersz, klikając wiersz. ale nie mógł znaleźć dokładnej odpowiedzi.

Źródło

2008-10-11 14:41:35

+0

Nie jestem pewien, czy już wypróbowałeś $ ('tr'). Live ("click", function() {$ (this) .remove();}); – gfivehost

49

Zakładając, że przycisk/link wewnątrz komórki danych w tabeli, coś takiego by rade ...

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

To usunie rodzica rodzica przycisku/link to jest kliknięte. Musisz użyć parent(), ponieważ jest to obiekt jQuery, a nie normalny obiekt DOM, i musisz dwukrotnie użyć parent(), ponieważ przycisk znajduje się wewnątrz komórki danych, która znajduje się wewnątrz wiersza .... co chcesz usunąć. $ (This) to przycisk kliknięty, więc po prostu o coś takiego usunie tylko przycisk:

$(this).remove();

Chociaż usunie komórkę danych:

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

Jeśli chcesz po prostu kliknij w dowolnym w wierszu, aby go usunąć, coś takiego by działało. Można łatwo zmodyfikować to poprosi użytkownika lub działać tylko na podwójne kliknięcie:

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

nadzieję, że pomoże ... Walczyłem o tym trochę siebie.

Źródło

2009-03-29 04:58:14 sluther

+20

Co się stanie, jeśli link nie znajduje się bezpośrednio w td, ale ma na przykład rozpiętość wokół niego? Myślę, że lepiej byłoby zrobić $ (this) .parents ('tr'). Remove(); aby pozwolić mu samemu podejść do drzewa DOM, znaleźć tr i usunąć go. –

+2

To też by działało. Wszystko zależy od tego, gdzie w DOMu znajduje się twój przycisk/link, dlatego podałem tak wiele przykładów i tak długich wyjaśnień. – sluther

+2

Możesz również użyć $ (this) .parents ('tr') – cgreeno

8

Wszystko, co musisz zrobić, to usunąć wiersz tabeli (<tr>) ze swojej tablicy. Na przykład tutaj jest kod, aby usunąć ostatni wiersz z tabeli:

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

* Kod powyżej została podjęta z this jQuery Howto post.

Źródło

2009-05-02 10:02:49 Uzbekjon

37

Można użyć:

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

za znalezienie nadrzędny wiersz tabeli elementu.

To jest bardziej eleganckie niż rodzicielskie(). Parent(), to jest to, co zacząłem robić i wkrótce nauczyłem się błędu na moich drogach.

--edit - Ktoś zwrócił uwagę, że pytanie było o usunięciu wiersza ...

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

Jak wskazano poniżej można po prostu zrobić:

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

Podobny kod Fragment można wykorzystać do wielu operacji, takich jak uruchamianie zdarzeń na wielu elementach.

Źródło

2009-11-24 09:56:26

+3

Trochę bardziej zwięzły: '$ (this) .closest (" tr "). remove()' –

15

Łatwy .. Spróbuj tego

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

Źródło

2010-01-11 05:20:01 Thurein

+10

Zmieniłbym '$ (this) .parent(). parent(). parent() 'to' $ (this) .closest ('tr') '. Jest bardziej wytrzymały i wyraźnie pokazuje, co wybierasz. – nickf

7

spróbować tego dla rozmiaru

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

pełny wykaz:

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

see it in action

Źródło

2010-10-30 22:21:21

2

Jeśli wiersz chcesz usunąć potęgę Chan ge możesz tego użyć. Po prostu przekaż tej funkcji wiersz #, który chcesz usunąć.

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

Źródło

2013-01-11 20:46:04 silvster27

1

jeśli masz HTML jak to

<tr> 
<td><span class="spanUser" userid="123"></span></td> 
<td><span class="spanUser" userid="123"></span></td> 
</tr>

gdzie userid="123" jest zwyczaj atrybutów, które można wypełnić dynamicznie podczas tworzenia tabeli

można użyć coś podobnego

$(".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.'); 
      } 
     }); 

    });

W takim przypadku nie znasz klasy lub identyfikatora użytkownika Tag e TR, ale mimo to możesz go usunąć.

Źródło

2013-05-06 12:44:45

+0

think live jest teraz przestarzałe na rzecz $ (". SpanUser"). On ("click", function() { – Tofuwarrior

3

Kolejny przez empty():

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

Źródło

2015-05-20 23:57:32

+1

Czy to nie usuwa wszystkich 's ale nie ? Zgaduję przeglądarka może automatycznie usunąć , ale podejrzewam, że nie jest to gwarantowane. –

1

Doceniam to stary post, ale szukałem zrobić to samo, a okazało się, że przyjęte rozwiązanie nie działa dla mnie. Zakładając, że JQuery został przeniesiony, ponieważ zostało to napisane.

Byle jak, znalazłem następujący pracował dla mnie:

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

Nie wiem, czy to pomaga nikomu. Mój powyższy przykład był częścią większej funkcji, więc nie zawijam go w detektorze zdarzeń.

Źródło

2016-08-19 12:55:30 SparkyUK2104

1

I Used To w moim kodu:

> $("#tbl").on("click", ".delete-row", function() { 
>     $(this).closest('tr').remove(); 
>    });

Źródło

2017-10-06 08:01:28

0

id nie jest dobrym selektor teraz. Możesz zdefiniować niektóre właściwości w wierszach. I możesz ich użyć 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żna użyć func wybrać wiersz tak (ES6):

const rowRemover = (category,type)=>{ 
    $('tr[category=${category}][type=${type}]').remove(); 
} 

rowRemover('petshot','fish');

Źródło

2017-10-06 08:12:40

Powiązane problemy

 Powiązane problemy