Keskustelu: Nettisivujen teko: jQuery : rivien lisääminen taulukkoon

Hei, osaisitteko sanoa, miten saisin tähän sillä tavalla, että valintalistan name muuttuisi joka kerta kun uusi rivi lisätään? (haluaisin että nimeen tulisi juokseva numero tyyliin, seltRow0, seltRow1...

<script>
var rivit = 0;
var sisalto = "<td><select name='seltRow0'><option value='value0'>Näytä Aina</option><option value='value1'>Vain Muuttuja</option></select></td>";
sisalto += "<td><select name='selRow0'><option value='value0'>Otsikko</option><option value='value1'>Tietorivi</option></select></td>";
</script>

<a href="#" onclick="rivit=rivit+1;$('#taulu tr:last').after('<tr><td>'+rivit+'</td>'+sisalto+'</tr>');">jQ</a>
<table border="0" id="taulu">
<tr>
	<td>Nro</td>
	<td>Tyyppi</td>
</tr>
<tr>
    <td>1</td>
    <td>
	<select name="seltRow0">
	<option value="value0">Näytä Aina</option>
	<option value="value1">Vain Muuttujan kanssa</option>
	</select>
    <select name="selRow0">
    <option value="value0">Otsikko</option>
    <option value="value1">Tietorivi</option>
    </select>
    </td>
</tr>
</table>

Voitko käyttää esimerkiksi kyseistä rivit-muuttujaa?

<script>
var rivit = 0;
var sisalto = "<td><select name='seltRow" + rivit + "'><option value='value0'>Näytä Aina</option><option value='value1'>Vain Muuttuja</option></select></td>";
sisalto += "<td><select name='selRow " + rivit + "'><option value='value0'>Otsikko</option><option value='value1'>Tietorivi</option></select></td>";
</script>

Edit: Alusta sivun alussa joku toinen lukumuuttuja arvolle 0 ja sitten aina scriptin kutsussa kasvatat sitä yhdellä (muuttuja++).

Rivit muuttuja ei juokse tuon mukana kun käytän tuota after-juttua. Se pysyy koko ajan samana eli 0:na.

Tarkemmin tutustuessa koodiisi voisit tehdä sen hieman eritavalla.

<script type="text/javascript">
// Alustetaan rivit täällä
var rivit = 0;

// Kutsutaan rivin lisäyksen yhteydessä tätä funktiota jolloin rivit muuttujaa ei alusteta joka kerta 0:ksi.
function lisaaRivi() {
	// == (rivit = rivit + 1)
	rivit++;

	var sisalto = "<td> " + rivit + " <select name='seltRow" + rivit + "'><option value='value0'>Näytä Aina</option><option value='value1'>Vain Muuttuja</option></select></td>";
	sisalto += "<td><select name='selRow" + rivit + "'><option value='value0'>Otsikko</option><option value='value1'>Tietorivi</option></select></td>";

	// Tulostetaan sisältö sivulle
	$('#taulu tr:last').after('<tr><td>'+rivit+'</td>'+sisalto+'</tr>');
}
</script>

<!-- Kutsutaan vain funktiota jolloin itse koodista saadaan paremmin jäsenneltyä -->
<a href="#" onclick="lisaaRivi()">jQ</a>

Alkuperäisessä ja ensimmäisessä korjatussakin koodissa on se vika, että script-elementin sisältö suoritetaan vain kerran. Sehän on ösuoraaö koodia, ei minkään funktion sisällä, joten sitä ei suoriteta erikseen jokaisen rivin lisäykselle.

Funktioksi kirjoittaminen varmaankin kannattaa. Se myös helpottaa sekoilemista erilaisten lainausmerkkien kanssa.

Toisaalta jos tässä ei ole muuta syytä käyttää jQuerya, niin tuntuisi luonnolliselta hoitaa asia ilman sitä, perus-Javascriptiä ja perus-DOMia käyttäen, esimerkiksi näin:

<a href="#" onclick="lisaarivi()">lisää rivi</a>

<script>
var rivit = 0;
function lisaarivi() {
  var uusirivi = document.createElement("tr");
  rivit++;
  uusirivi.innerHTML = "<td>"+rivit+"</td><td><select name=selRow" +
  rivit + "><option value='value0'>Otsikko</option><option " +
  "value='value1'>Tietorivi</option></select></td>";
  document.getElementById("taulu").appendChild(uusirivi); }
</script>

En kylläkään ihan hahmota, mitä tässä varsinaisesti ollaan tekemässä. Taulukon ensimmäisen rivin kai ainakin olisi syytä olla otsikkorivi? (<thead><tr><th> jne.) Ja rivin lisääminen olisi luonnollisempaa tehdä painikkeella kuin linkillä, mieluiten painikkeella, joka luodaan Javascriptillä.

Mod. lisäsi kooditagit.

kiitoksia vinkeistä, sain toimimaan.