Cześć !
Chciałem stworzyć program który dodaje wiersze i komórki do tabeli i uzupełnia je tekstem.
Mój pierwszy pomysł był oparty na stringu do którego dopisywałem kod i dodawałem do tabeli.
Działało, ale niestety było to strasznie nieelastyczne podejście.
Postanowiłem że stworzę funkcję która robi całą robotę "od podstaw".
Na razie chcę żeby dodawała nowy wiersz zawierający x i y, bo nie będzie problemem podpiąć potem pod to jakąś tablicę:
liczydlo = 0
function creator() {if (liczydlo == 0) {
var table = document.getElementsByTagName("table")[0];
var tr = document.createElement("tr");
table.appendChild(tr);
var ttr = document.getElementsByTagName("tr")[liczydlo];
var td1 = document.createElement("td");
ttr.appendChild(td1);
var td2 = document.createElement("td");
ttr.appendChild(td2);
var ttd1 = document.getElementsByTagName("td")[liczydlo];
var texx1 = document.createTextNode("cosiek1");
ttd1.insertBefore(texx1, ttd1.firstChild);
var ttd2 = document.getElementsByTagName("td")[liczydlo + 1];
var texx2 = document.createTextNode("ktosiek2");
ttd2.insertBefore(texx2, ttd2.firstChild);
liczydlo++
}
else {
var table = document.getElementsByTagName("table")[0];
var tr = document.createElement("tr");
table.appendChild(tr);
var ttr = document.getElementsByTagName("tr")[liczydlo];
var td1 = document.createElement("td");
ttr.appendChild(td1);
var td2 = document.createElement("td");
ttr.appendChild(td2);
var ttd1 = document.getElementsByTagName("td")[liczydlo * 2 + 1];
var texx1 = document.createTextNode("x");
ttd1.insertBefore(texx1, ttd1.firstChild);
var ttd2 = document.getElementsByTagName("td")[liczydlo * 2 + 2];
var texx2 = document.createTextNode("y");
ttd2.insertBefore(texx2, ttd2.firstChild);
liczydlo++
}
}
HTML:
<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="trening.js"></script>
</head>
<body>
<table>
</table>
<form>
<input type="button" onClick="creator()" value="Dodaj wiersz">
</form>
</body>
</html>
Niestety funkcja nie działa ona jak należy, i do tego jest strasznie wielka jak na swoją niewielką funkcjonalność.
Pytanie1: Jak zrobić żeby to działało?
Pytanie2: Jak zrobić żeby to skrócić bez uciekania się do frameworków (ćwiczę na razie czysty JS) ?
Pytanie3: Jak nazywać te zmienne żeby to miało ręce i nogi ?
PS: Taaak wiem że użyłem zmiennej globalnej. To z lenistwa ;-)