ændre rækkefølge på tekstfelter
Jeg har engang fundet følgende script, som man bruge til at ændre rækkefølgen på tekstfelter:<html>
<head>
<script language="JavaScript" type="text/JavaScript">
<!--
function flyt(nr, vej) {
c2 = nr + vej;
tbl = document.getElementById("minTabel");
temp1 = new Array(tbl.rows(nr).children[1].innerHTML, tbl.rows(nr).children[2].innerHTML, tbl.rows(nr).children[3].getElementsByTagName("a")[0].href);
temp2 = new Array(tbl.rows(c2).children[1].innerHTML, tbl.rows(c2).children[2].innerHTML, tbl.rows(c2).children[3].getElementsByTagName("a")[0].href);
tbl.rows(nr).children[1].innerHTML = temp2[0];
tbl.rows(nr).children[2].innerHTML = temp2[1];
tbl.rows(nr).children[3].getElementsByTagName("a")[0].href = temp2[2];
tbl.rows(c2).children[1].innerHTML = temp1[0];
tbl.rows(c2).children[2].innerHTML = temp1[1];
tbl.rows(c2).children[3].getElementsByTagName("a")[0].href = temp1[2];
tbl.rows(nr).children[1].getElementsByTagName("input")[0].name = "nr" + nr;
tbl.rows(nr).children[2].getElementsByTagName("input")[0].name = "nr" + nr + "url";
tbl.rows(c2).children[1].getElementsByTagName("input")[0].name = "nr" + c2;
tbl.rows(c2).children[2].getElementsByTagName("input")[0].name = "nr" + c2 + "url";
}
//-->
</script>
</head>
<body>
<form>
<table cellspacing="4" cellpadding="0" id="minTabel">
<tr>
<td></td>
<td style="width: 150px; background-color: #CCCCCC; padding: 2px; font-weight: bold;">Navn:</td>
</tr>
<tr>
<td style="text-align: right;"><a href="#" onClick="flyt(1, 1); return false;">Ned</a></td>
<td><input type="text" name="nr1" value="Navn 1" style="width: 100%;"></td>
<td><input type="text" name="nr1url" value="URL 1" style="width: 100%;"></td>
<td><a href="?mode=slet&id=1">Slet</a></td>
</tr>
<tr>
<td><a href="#" onClick="flyt(2, -1); return false;">Op</a> <a href="#" onClick="flyt(2, 1); return false;">Ned</a></td>
<td><input type="text" name="nr2" value="Navn 2" style="width: 100%;"></td>
<td><input type="text" name="nr2url" value="URL 2" style="width: 100%;"></td>
<td><a href="?mode=slet&id=2">Slet</a></td>
</tr>
<tr>
<td>
<a href="#" onClick="flyt(3, -1); return false;">Op</a> <a href="#" onClick="flyt(3, 1); return false;">Ned</a>
</td>
<td>
<input type="text" name="nr3" value="Navn 3" style="width: 100%;">
</td>
<td>
<input type="text" name="nr3url" value="URL 3" style="width: 100%;">
</td>
<td>
<a href="?mode=slet&id=3">Slet</a>
</td>
</tr>
<tr>
<td>
<a href="#" onClick="flyt(4, -1); return false;">Op</a> <a href="#" onClick="flyt(4, 1); return false;">Ned</a>
</td>
<td>
<input type="text" name="nr4" value="Navn 4" style="width: 100%;">
</td>
<td>
<input type="text" name="nr4url" value="URL 4" style="width: 100%;">
</td>
<td>
<a href="?mode=slet&id=4">Slet</a>
</td>
</tr>
<tr>
<td>
<a href="#" onClick="flyt(5, -1); return false;">Op</a>
</td>
<td>
<input type="text" name="nr5" value="Navn 5" style="width: 100%;">
</td>
<td>
<input type="text" name="nr5url" value="URL 5" style="width: 100%;">
</td>
<td>
<a href="?mode=slet&id=5">Slet</a>
</td>
</tr>
<tr>
<td colspan="3" style="text-align: right;">
<input type="submit" value="Edit" style="width: 50px;">
</td>
<td>
</td>
</tr>
</table>
</form>
</body>
</html>
Nu vil jeg gerne kunne bruge scriptet uden at tekstfelterne behøver være i tabeller. Noget ala det nedenstående, jeg er bare ikke klar over hvad jeg skal bruge istedet for document.getElementById("minTabel");:
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
<!--
function flyt(nr, vej) {
c2 = nr + vej;
tbl = document.getElementById("minTabel");
temp1 = new Array(tbl.rows(nr).children[1].innerHTML, tbl.rows(nr).children[2].innerHTML, tbl.rows(nr).children[3].getElementsByTagName("a")[0].href);
temp2 = new Array(tbl.rows(c2).children[1].innerHTML, tbl.rows(c2).children[2].innerHTML, tbl.rows(c2).children[3].getElementsByTagName("a")[0].href);
tbl.rows(nr).children[1].innerHTML = temp2[0];
tbl.rows(nr).children[2].innerHTML = temp2[1];
tbl.rows(nr).children[3].getElementsByTagName("a")[0].href = temp2[2];
tbl.rows(c2).children[1].innerHTML = temp1[0];
tbl.rows(c2).children[2].innerHTML = temp1[1];
tbl.rows(c2).children[3].getElementsByTagName("a")[0].href = temp1[2];
tbl.rows(nr).children[1].getElementsByTagName("input")[0].name = "felt" + nr;
tbl.rows(c2).children[1].getElementsByTagName("input")[0].name = "felt" + c2;
}
//-->
</script>
</head>
<body>
<div id="main">
<div class="felter">
<form>
<input type="text" name="felt0" value="felt 0" /><input type="button" value="Ned" onClick="flyt(0, 1); return false;" />
<input type="text" name="felt1" value="felt 1" /><input type="button" value="Ned" onClick="flyt(1, 1); return false;" /><input type="button" value="Op" onClick="flyt(1, -1); return false;" />
<input type="text" name="felt2" value="felt 2" /><input type="button" value="Ned" onClick="flyt(2, 1); return false;" /><input type="button" value="Op" onClick="flyt(2, -1); return false;" />
<input type="text" name="felt3" value="felt 3" /><input type="button" value=" Op " onClick="flyt(3, -1); return false;" />
</form>
</div>
</div>
</body>
