Lägga till/tabort tr vid upp/ned

Lite osäker på hur du menar, men:

<script type="text/javascript">

var trs = [],
    posts;

function initRows() {
    var pNodes = posts.childNodes,
	elm;

    trs.length = 0;

    outer:
    for (var i = 0; (elm = pNodes[i]); ++i) {
	switch (elm.nodeName) {
	    case "TBODY":
	    {
		var eNodes = elm.childNodes,
		    tElm;

		for (var j = 0; (tElm = eNodes[j]); ++j) {
		    switch (tElm.nodeName == "TR") {
			case true: trs.push(tElm); break;
		    }
		}

	    } break outer;

	    case "TR": trs.push(elm); break;
	}
    }
}

function move(obj, where) {
    var tr = 0;

    while (tr = obj.parentNode) {
	if (tr.nodeName == "TR") break;
	obj = obj.parentNode;
    }

    var iLen = trs.length,
	elm;

    outer:
    for (var i = 0; (elm = trs[i]); ++i) {
	if (tr == trs[i]) {
	    if ( (i == 0 && where == "up") || (i + 1 == iLen && where == "down"))
		return;

	    var cTr   = tr.cloneNode(true),
		tbody = posts.getElementsByTagName("TBODY").item(0),
		index = where == "up" ? 1 : -1;

	    tbody.replaceChild(cTr, trs[i - index]);
	    tbody.replaceChild(trs[i - index].cloneNode(true), tr);

	    break outer;
	}
    }

    initRows();
}

window.onload = function() {
    posts = document.getElementById("posts");
    initRows();
}

</script>

<table border="1" id="posts">
    <tr>
	<td>Post 1</td>
	<td>
	    <button type="button" onclick="move(this, 'up')">Flytta upp</button>
	    <button type="button" onclick="move(this, 'down')">Flytta ned</button>
	</td>
    </tr>

    <tr>
	<td>Post 2</td>
	<td>
	    <button type="button" onclick="move(this, 'up')">Flytta upp</button>
	    <button type="button" onclick="move(this, 'down')">Flytta ned</button>
	</td>
    </tr>

    <tr>
	<td>Post 3</td>
	<td>
	    <button type="button" onclick="move(this, 'up')">Flytta upp</button>
	    <button type="button" onclick="move(this, 'down')">Flytta ned</button>
	</td>
    </tr>
</table>

:q

Bra försök... ;)
Men låt säga att jag vill flytta "post 1" längst ned så måste jag "följa efter" med musen till "våningen under" osv.
Därav tanken med att om jag klickar på "flytta ner" så skall en rad undertill byggas på och virse versa. Så att jag kan stå still med pekaren.

Fortfarande osäker på hur du menar :e Kan du tänka dig att visa hur du hade tänkt att resultatet skall bli, visuellt, om jag t.ex. flyttar ned den första posten ett steg?

:)

Skickar en liten länk med en animation.
http://member.webforum.nu/Jesper T/pek.gif
:e
Som du ser så flyttas hela tabellen...

Ah, ok. Vad händer om det är 2 134 poster? Skall de försvinna utanför fönstret, eller är det få poster det handlar om?

:)

Tänkte att tabellen skall ligga i ett scrollbart lager.

Kanske bara kan ändra style.top?

Försöker att göra något sådant här:

function move(where){
var myTop=document.getElementById("posts").style.top.split("px")[0];
	if(where=="up"){
		document.getElementById("posts").style.top=(myTop+15)+"px";
	}else{
		document.getElementById("posts").style.top=(myTop-15)+"px";
		}
};

Men det funkar inte så bra med negativa tal.

Bahhh. Glöm detta inlägg. Fixar det med serverside....
Tack Peter S och andra.

Ursäkta dröjsmålet Jesper. Visst går det bra att använda style.top, testa följande:

<script type="text/javascript">

var trs = [],
    posts;

function initRows() {
    var pNodes = posts.childNodes,
	elm;

    trs.length = 0;

    outer:
    for (var i = 0; (elm = pNodes[i]); ++i) {
	switch (elm.nodeName) {
	    case "TBODY":
	    {
		var eNodes = elm.childNodes,
		    tElm;

		for (var j = 0; (tElm = eNodes[j]); ++j) {
		    switch (tElm.nodeName == "TR") {
			case true: trs.push(tElm); break;
		    }
		}

	    } break outer;

	    case "TR": trs.push(elm); break;
	}
    }
}

function move(obj, where) {
    var tr = k = 0;

    while (tr = obj.parentNode) {
	if (tr.nodeName == "TR") break;

	k += obj.offsetHeight;
	obj = obj.parentNode;
    }

    var iLen = trs.length,
	elm;

    outer:
    for (var i = 0; (elm = trs[i]); ++i) {
	if (tr == trs[i]) {
	    if ( (i == 0 && where == "up") || (i + 1 == iLen && where == "down"))
		return;

	    var cTr   = tr.cloneNode(true),
		tbody = posts.getElementsByTagName("TBODY").item(0),
		index = where == "up" ? 1 : -1;

	    tbody.replaceChild(cTr, trs[i - index]);
	    tbody.replaceChild(trs[i - index].cloneNode(true), tr);

	    if (where == "up") {
		posts.style.top = (parseInt(posts.style.top) || 0) + k + "px";
	    }
	    else {
		posts.style.top = (parseInt(posts.style.top) || 0) - k + "px";
	    }

	    break outer;
	}
    }

    initRows();
}

window.onload = function() {
    posts = document.getElementById("posts");
    initRows();
}

</script>

<div style="border:2px solid; overflow:auto; height:100px">
<table id="posts" style="position:relative">
    <tr>
	<td>Post 1</td>
	<td>
	    <button type="button" onclick="move(this, 'up')">Flytta upp</button>
	    <button type="button" onclick="move(this, 'down')">Flytta ned</button>
	</td>
    </tr>

    <tr>
	<td>Post 2</td>
	<td>
	    <button type="button" onclick="move(this, 'up')">Flytta upp</button>
	    <button type="button" onclick="move(this, 'down')">Flytta ned</button>
	</td>
    </tr>

    <tr>
	<td>Post 3</td>
	<td>
	    <button type="button" onclick="move(this, 'up')">Flytta upp</button>
	    <button type="button" onclick="move(this, 'down')">Flytta ned</button>
	</td>
    </tr>

    <tr>
	<td>Post 4</td>
	<td>
	    <button type="button" onclick="move(this, 'up')">Flytta upp</button>
	    <button type="button" onclick="move(this, 'down')">Flytta ned</button>
	</td>
    </tr>
</table>
</div>

:)