---
title: "Lägga till/tabort tr vid upp/ned"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/104432-lägga-till-tabort-tr-vid-upp-ned"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Jesper T"
published: "2004-05-27T11:22:58.000Z"
updated: "2004-05-31T07:49:35.000Z"
replies: 10
views: 295
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/104432-lägga-till-tabort-tr-vid-upp-ned"
---

# Lägga till/tabort tr vid upp/ned

## #1 — Jesper T, 2004-05-27T11:22Z

Kryptisk rubrik?

Det är så att jag har en tabell med olika poster och i en kolumn så har jag en knapp för "flytta upp" respektive "flytta ned". Men problemet är att om jag vill flytta upp samma post flera gånger så måste jag flytta musen upp eller ned.
Då var tanken att om jag flyttar upp en post så skall en rad läggas till nere och virse versa.
Tips?

```
<table>
<tr>
<td>Post 1</td><td>[FONT=wingdings]òñ[/FONT]</td>
</tr>

<tr>
<td>Post 2</td><td>[FONT=wingdings]òñ[/FONT]</td>
</tr>

<tr>
<td>Post 3</td><td>[FONT=wingdings]òñ[/FONT]</td>
</tr>
</table>
```

Permalänk: https://www.webforum.nu/p/104432

## #2 — Peter S, 2004-05-27T17:39Z

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

Permalänk: https://www.webforum.nu/p/1354837

## #3 — Jesper T, 2004-05-28T07:57Z

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.

Permalänk: https://www.webforum.nu/p/1355060

## #4 — Peter S, 2004-05-28T08:53Z

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?

 :)

Permalänk: https://www.webforum.nu/p/1355086

## #5 — Jesper T, 2004-05-28T09:16Z

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

Permalänk: https://www.webforum.nu/p/1355106

## #6 — Peter S, 2004-05-28T09:20Z

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?

 :)

Permalänk: https://www.webforum.nu/p/1355111

## #7 — Jesper T, 2004-05-28T09:22Z

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

Permalänk: https://www.webforum.nu/p/1355115

## #8 — Jesper T, 2004-05-28T09:30Z

Kanske bara kan ändra style.top?

Permalänk: https://www.webforum.nu/p/1355120

## #9 — Jesper T, 2004-05-28T13:21Z

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.

Permalänk: https://www.webforum.nu/p/1358166

## #10 — Jesper T, 2004-05-28T13:52Z

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

Permalänk: https://www.webforum.nu/p/1358183

## #11 — Peter S, 2004-05-31T07:49Z

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>
```

 :)

Permalänk: https://www.webforum.nu/p/1359174

---

Tråden på webben: https://www.webforum.nu/amne/javascript/104432-lägga-till-tabort-tr-vid-upp-ned