Javasrcipt - tworzenie tabeli dynamicznie

Dla specjalistów Webmastering
#1

Hej,

próbowałem zrobić dynamiczne dodawanie wierszy do tabeli na bazie kodu z tej strony: http://viralpatel.net/blogs/dynamically … avascript/

Użyłem tej funkcji:

function addRow(tableID) {


            var table = document.getElementById(tableID);


            var rowCount = table.rows.length;

            var row = table.insertRow(rowCount);


            var cell1 = row.insertCell(0);

            var element1 = document.createElement("input");

            element1.type = "checkbox";

            element1.name="chkbox[]";

            cell1.appendChild(element1);


            var cell2 = row.insertCell(1);

            cell2.innerHTML = rowCount + 1;


            var cell3 = row.insertCell(2);

            var element2 = document.createElement("input");

            element2.type = "text";

            element2.name = "txtbox[]";

            cell3.appendChild(element2);



        }

i dostaję błąd:

Uncaught TypeError: Cannot read property 'rows' of null

Wnioskuję z tego, że zmienna table zawiera null zamiast referencji do tabeli. Tak wygląda tabela i wywołanie funkcji:

| Zdjęcie | Nazwa | Kalorie | Waga |

[/code]

[code]addRow("#prodcut_values");

Czy ktoś jest wstanie wskazać w czym jest błąd?

#2

Może tak, ale głowy nie dam.

#3

Zacznij od wywalenia # w wywołaniu :stuck_out_tongue:

@ra-v, a to ci przypadkiem nie zwróci tablicy tr’ów ?

#4

Wywalenie nie pomaga. W sumie zdziwiła mnie Twoja rada, id elementu zawsze poprzedza się #

Mam inny pomysł. Czy może chodzić o to, że tablica jest w innej tablicy i powinienem się dostać do każdego elementu po kolei zgodnie z modelem DOM?

#5

Masz prodcut zamiast product :stuck_out_tongue:

A co do tablicy to byid zwraca element, a nie tablicę tak jak tagname

Twój kod po mojej poprawce z pierwszego postu działa :stuck_out_tongue:

http://jsbin.com/iQaNamuJ/2/

Nie zawsze :stuck_out_tongue:

#6

Rzeczywiście działa :slight_smile: Dzięki.

Teraz rozszerzając to zadanie mam kolejny problem. Do jednego z elementów dodałem button z funkcją onclick:

element2.onclick = function() { addToList(this) };

funkcja:

function addToList(item){

	var id = $(item).attr("id");


	alert(id);

}

W tej samej komórce co button jest również textbox do wpisania wartości. Bez problemu pobieram id buttona i po id textboksa (w danej komórce textbox i button mają taki sam id) chciałem pobrać tekst rozszerzając funkcję:

function addToList(item){

	var id = $(item).attr("id");


	if (typeof document.getElementById(id)[0] != 'undefined'){

	var amount = document.getElementById(id)[0].value;

	}

	else{

	var amount = 5;

	}


	alert(id +" " + amount);

}

Jednak zawsze wychodzi na to, ze element jest undefined.

Jak to rozwiązać?

#7

to ty piszesz w jquery czy w js ?

#8

Jak wygodniej.

Chyba nie ma to większej różnicy czy część będzie w jquery a część w js?

EDIT:

Rozwiązałem to używając jQuery i pobierając wartość z elementu wcześniejszego do mojego buttona:

function addToList(item){

	var id = $(item).attr("id");


	var amount = $(item).prev().val();


	alert(id +" " + amount);

}
#9

Używanie naprzemiennie do tego samego raz js a raz jquery mija się z celem :stuck_out_tongue:

#10

Z jakim celem? :wink:

#11

Ładujesz niepotrzebnie bibliotekę z której nie zawsz korzystasz. Marnujesz transfer i zwiększasz wagę strony. Poza tym czytelność kodu drastycznie spada. Jak już chcesz koszystać z gotowców to poszukaj takowych w jquery kod jest o wiele krótszy.