• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Usuwanie rzędu z dynamicznie utworzonej tabeli po kliknięciu na niego

VPS Starter Arubacloud
+1 głos
721 wizyt
pytanie zadane 13 listopada 2015 w JavaScript przez ScriptyChris Mędrzec (190,190 p.)
edycja 13 listopada 2015 przez ScriptyChris

Utworzyłem tabelę, do której wiersze są dodawane dynamicznie (z tablicy). Mam przycisk, który usuwa ostatnią linię, aż napotka th. Natomiast aby usuwać wybrany wiersz (po kliknięciu na niego myszką), wstawiłem taką funkcję (copyright @Comandeer :) ):

(function(d)
{
	d.getElementsByTagName('table')[0].addEventListener('click', function(e)
	{
		var t = e.target;
		if(t.tagName.toLowerCase() === 'td')
		//console.log(t.parentNode.innerHTML);
		t.parentNode.innerHTML = '';
	}, false);
}(document));

Pytanie, czy kliknięta linia jest faktycznie usuwana, czy tylko traktowana jako pusta (przez przyrównanie jej innerHTML do pustego stringa')? Jeśli faktycznie jej nie usuwam (z tablicy, z której została dynamicznie utworzona), to jak to zrobić?

Usuwanie ostatniej linii, po kliknęciu w przycisk, realizuje poprzez:

removeRow = function(){
		if (document.querySelector('table').rows.length != 1)
		{
			document.querySelector('table').deleteRow(this.length - 1);
		}
};

Czy mogę zastosować metodę .deleteRow przy usuwaniu wybranej linii? Jeśli ona do tego również się nadaje, to jak ją podpiąć pod t.parentNode?

Tabela wygląda tak

2 odpowiedzi

+2 głosów
odpowiedź 14 listopada 2015 przez Comandeer Guru (599,730 p.)
wybrane 14 listopada 2015 przez ScriptyChris
 
Najlepsza

Pytanie, czy kliknięta linia jest faktycznie usuwana, czy tylko traktowana jako pusta (przez przyrównanie jej innerHTML do pustego stringa')?

Faktycznie, tr ma jedynie ustawianą pustą zawartość, ale pozostaje w tabeli. Żeby usunąć można zrobić coś typu:

t.parentNode.parentNode.removeChild(t.parentNode);
//lub w nowszych browserach
t.parentNode.remove();

Takie coś usunie nam całe tr

Czy mogę zastosować metodę .deleteRow przy usuwaniu wybranej linii? Jeśli ona do tego również się nadaje, to jak ją podpiąć pod t.parentNode?

Musiałbyś obliczyć, którą linią w tabeli jest ta, którą chcesz usunąć. 

0 głosów
odpowiedź 13 listopada 2015 przez jegor377 Stary wyjadacz (13,230 p.)
nwm czy to dobry pomysł, ale ja bym stworzył tablicę tej tabeli i usunął wszystko z <table>. Następnie stworzyłbym metodę która miała by za zadanie wpisywać (innerHTML) do <table> nową tablicę w foreachu. Do każdego templata dodałbym zdarzenie onclick, które miało by dostawać id tabeli i po prostu usuwać ją (splice) z tablicy, a następnie odświerzać tabele wcześniej utworzoną metodą. :)

PS dosyć ciekawe pytanie. :)
komentarz 13 listopada 2015 przez jegor377 Stary wyjadacz (13,230 p.)
nom to by było cholernie wygodne. :)
komentarz 13 listopada 2015 przez jegor377 Stary wyjadacz (13,230 p.)
i tak, dopiero czytam co napisałeś. kurde xd
komentarz 13 listopada 2015 przez jegor377 Stary wyjadacz (13,230 p.)
a jednak dobrze myślę xddd ehh monolog :)
komentarz 14 listopada 2015 przez Comandeer Guru (599,730 p.)
No i po co Ci ta tablica, skoro wszystkie operacje można zrobić na tabeli?
komentarz 14 listopada 2015 przez jegor377 Stary wyjadacz (13,230 p.)
No dla ułatwienia, po prostu innego sposobu nie znałem, ale widzę, że ty już coś dałeś. :D
komentarz 14 listopada 2015 przez ScriptyChris Mędrzec (190,190 p.)

Tabelę utworzyłem tak, że zrobiłem tablice dla td oraz dla tr i tam ładowałem zawartość w pętli. Następnie tablice elementów td podpiąłem do tablicy tr, a tę do table.

Także tabela niby jest zrobiona na tablicach i też na początku myślałem, żeby po prostu z tablicy tr usuwać wybrany element, ale metoda z t.parentNode.remove() wydaje mi się prostsza.

Podobne pytania

0 głosów
1 odpowiedź 630 wizyt
pytanie zadane 16 września 2018 w JavaScript przez Sebastian Szyja Bywalec (2,810 p.)
0 głosów
1 odpowiedź 541 wizyt
pytanie zadane 22 maja 2017 w JavaScript przez niezalogowany
0 głosów
1 odpowiedź 2,014 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...