Program generujący tabelę

0

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 ;-)

0

Też zacząłem przygodę z JS, ale:

<body>
    <button class="btn-add-tr">Dodaj</button>

    <table class="table">
    </table>

    <script>

      var table = document.querySelector(".table");
      var btn = document.querySelector(".btn-add-tr");

      btn.addEventListener('click', function(){
        var newTr = document.createElement('tr');

        newTr.innerHTML = '<td>Kot</td><td>Pies</td>'
        table.appendChild(newTr);

      });
    </script>
  </body>

I ew. z formularza można pobrać wartości które będą wpisane w komórki.
Ktoś doświadczony może oceni ?

0

Udało mi się naprawić problem.
Był natury matematycznej.
Program Szukał najpierw komórki 0, 1 a potem nagle 3, 4, 5 zapominając o komórce 2.
Uprzątnąłem też kod całej funkcji.

liczydlo = 0

function createTable() {

	addRow(); addCells(); fillCells()
}

function addRow(){
var table = document.getElementsByTagName("table")[0];
var tr = document.createElement("tr");
table.appendChild(tr);
}

function addCells(){
var ttr = document.getElementsByTagName("tr")[liczydlo];
var td1 = document.createElement("td");
ttr.appendChild(td1);
var td2 = document.createElement("td");
ttr.appendChild(td2);
}

function fillCells(){
var ttd1 = document.getElementsByTagName("td")[liczydlo *2];
var texx1 = document.createTextNode("cosiek1");
ttd1.insertBefore(texx1, ttd1.firstChild);
var ttd2 = document.getElementsByTagName("td")[liczydlo * 2 +1];
var texx2 = document.createTextNode("ktosiek2");
ttd2.insertBefore(texx2, ttd2.firstChild);
liczydlo++
}

Czy wiecie jak to rozwiązać bez globali ?

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