[js] dodawanie i usuwanie wskazanych wierszy w tabeli

0

Witam mam do napisania scrypt który dodaje we wskazanym miejscu tabeli nowy wiersz (np mamy 10 wierszy, zaznaczam(może być samo zaznaczenie tekstu) 4 i ma się dodać pod nim) i usuwanie wybranego w podobny sposób.

Na razie mam coś takiego:

<html>
<head>
<style type"text/css">
table	{
	border:5px double black;
		
	}

td	{
	border:1px double black ;

	}
	</style>
	
	<script type="text/javascript" language="JavaScript">
	


function dodaj()
{
nowyWiersz = document.createElement("td");
nowyWiersz.innerHTML = "<td>Wiersz</td>";
var dodaj = document.getElementById('tabela');
dodaj.appendChild(nowyWiersz);
}


</script>
	</head>
<body>
<form method="post">
<input type="button" value="Dodaj" onclick="dodaj();"/>
</form>

<table id="tabela">
<tr>
<td>wiesz 1</td>
</tr>
<tr>
<td>wiersz 2</td>
</tr>
<tr >
<td>wiersz 3</td>

</tr>
</table>

</body>

</html>
0

ktoś może dać mi chociaż wskazówki?

0

Do tego celu najlepiej użyć frameworków JS, np. jQuery.
Tworzysz szkielet tabeli, jak wyżej napisałeś. Ogólny kod JS może wyglądać tak:


// zmienna trzymająca aktualnie zaznaczony wiersz tabeli, na początku niezdefiniowana
var zaznaczonyWiersz;

// funkcja definiująca co się będzie działo po kliknięciu na każdy element <tr> 
// znajdujący się w tabeli z atrybutem id #tabela
$("#tabelka tr").click(function()
{
   // już wiemy, który wiersz został kliknięty, przypisz go do zmiennej
   zaznaczonyWiersz = this;
});

// co się dzieje po kliknięciu na button o id #dodaj
$("#dodaj").click(function()
{
  // jeśli kliknęto na jakiś wiersz w tabeli ..
   if (zaznaczonyWiersz != null)
  {
     // dodaj nowy wiersz tuż za nim
     $(zaznaczonyWiersz).after($("<tr></tr>"));
  }
});
0

@up:
Prawdopodobnie też chciałbyś jakoś pokazać użytkownikowi, że wiersz jest zaznaczony. Więc przed lub po tej linii:

zaznaczonyWiersz = this;

można dodać kod dodający do aktualnego wiersza np. jakąś klasę, dzięki czemu w CSS można dać jej jakieś wyróżnienie. Wcześniej, w obsłudze kliknięcia trzeba jednak zlikwidować zaznaczenie z poprzednio wybranego wiersza, bo przecież użytkownik może kliknąć sobie najpierw w pierwszy, a potem uznać, że nowy wiersz chce jednak umieścić niżej i kliknąć w drugi. Wtedy z tego pierwszego wiersza należy usunąć zaznaczenie. Można to zrobić jakoś tak (rozszerzam kod kubARka):

$("#tabelka tr").click(function()
{
   if (zaznaczonyWiersz) { // jeśli wcześniej był zaznaczony inny wiersz...
     $(zaznaczonyWiersz).removeClass('zaznaczony'); // zlikwiduj zaznaczenie
   }
   // już wiemy, który wiersz został kliknięty, przypisz go do zmiennej
   zaznaczonyWiersz = this;
   $(this).addClass('zaznaczony');
});

Dodam jeszcze, że taki zapis w kodzie jest w tym wypadku trochę nieelegancki, mylący i narażony na potencjalne błędy:

   if (zaznaczonyWiersz != null)

Operatory == i != są w JavaScripcie pokraczne, dokonują konwersji typów. Zalecane jest użycie ich silnych odpowiedników (=== i !==), szczególnie gdy porównuje się wartości fałszywe. W tym wypadku użycie operatora !== ujawni błąd: zmienna zaznaczonyWiersz nie jest nigdzie w kodzie ustawiana na null. Na początku ma ona wartość undefined:

var zaznaczonyWiersz;

Więc bez sensu jest potem porównywać ją do null (mimo że dzięki pokraczności operatora == w tym wypadku to jednak zadziała). Polecam w ogóle zrezygnować z porównywania do jakiejkolwiek wartości i użyć po prostu warunku:

if (zaznaczonyWiersz)

Zwięźlej, przejrzyściej (IMO) i nie wprowadza w błąd, że zaznaczonyWiersz może zawierać wartość null, gdy w rzeczywistości zawiera undefined. W JavaScripcie są to różne wartości i operatory === i !== to wykrywają, ale ich pokraczne wersje (== i !=) już nie, mimo że czasem -- w niemożliwych do zapamiętania sytuacjach -- bywają na to wrażliwe.

0

Heh, racja. Zostało mi to przyzwyczajenie z C# :P

1 użytkowników online, w tym zalogowanych: 0, gości: 1