Autor Zpráva
PetrPan
Profil *
#1 · Zasláno: 23. 1. 2007, 14:03:21
Odpovědět Citovat
Dobrý den,
sháním tutoriálek pro změna pořadí řádků v tabulce. Zatím jsem vždycky našelpouze na změnu p ořadí v seznamu (li) a když sem se to snažil upravit pro tabulku tak to neudělalo krom chyb nic.
zero0x
Profil
#2 · Zasláno: 23. 1. 2007, 15:10:00
Odpovědět Citovat
takze metody neviem ci presne tak maju byt, si najdi na internete, ale vo vseobecnosti 


tabulka = najdi si v dokumente cez getElementById !!! ale pozor tu si najdi nie TABLE ale TBODY, lebo ti to nezozere MSIE !!!

riadky = tabulka.getElementsByTagName("tr");  //teraz maz uz vsetky riadky

while(tabulka.hasChildNodes) {

 tabulka.removeChild(tabulka.firstChild); //zmazes vsetky riadky

 }



//a teraz mozes pripojit v poradi akom chces

tabulka.appendChild(riadky[0]);

tabulka.appendChild(riadky.[5]); //poradie ake chces

tabulka.appendChild(riadky.lastChild); //tiez mozes pripojit napriklad posledneho potomka. ked to napriklad zacyklis, tak mozes zoradit takymto sposobom tabulku odkonca


nie je to tak uplne ajax ako si asi myslis, je to skor W3C DOM, ale sranda je s tym.
los
Profil *
#3 · Zasláno: 24. 1. 2007, 02:10:10
Odpovědět Citovat
Na výmenu riadkov nemusíš odstrániť najprv všetky riadky a potom ich tam všetky pridať v novom poradí, ale stačí odstrániť iba tie dva riadky a pridať ich na správne miesto.

Metódy, ktoré na to potrebuješ poznať: nextSibling, insertBefore. Keď vieš, ktoré riadky chceš vymeniť (napr. el1 a el2), tak môžeš použiť niečo takéto: 
function swap(el1, el2) {

	var parent = el1.parentNode;

	var next1 = el1.nextSibling;

	var next2 = el2.nextSibling;

	

	parent.insertBefore(el2, next1);

	parent.insertBefore(el1, next2);

}
los
Profil *
#4 · Zasláno: 24. 1. 2007, 02:11:14
Odpovědět Citovat
Metódy, ktoré na to potrebuješ poznať: nextSibling, insertBefore
nextSibling je samozrejme vlastnosť a nie metóda.
PetrPan
Profil *
#5 · Zasláno: 24. 1. 2007, 19:13:39
Odpovědět Citovat
zero0x, los: diky za tip, posledni problemek ktery mam je, ze nevim jak mam danefunkce volat a jak jim dat parametry.

Prozatim to mam v pracovni verzi takto: 


<table id="tabulka">

	<tbody>

	    <tr>

	        <td>prvni radek</td>

	        <td onclick="up(0);">up</td>

	        <td onclick="down(0);">down</td>

		</tr>

	    <tr>

	        <td>druhy radek</td>

	        <td onclick="up(1);">up</td>

	        <td onclick="down(1);">down</td>

		</tr>

	    <tr>

	        <td>treti radek</td>

	        <td onclick="up(2);">up</td>

	        <td onclick="down(2);">down</td>

		</tr>

	    <tr>

	        <td>ctvrty radek</td>

	        <td onclick="up(3);">up</td>

	        <td onclick="down(3);">down</td>

		</tr>

	    <tr>

	        <td>paty radek</td>

	        <td onclick="up(4);">up</td>

	        <td onclick="down(4);">down</td>

		</tr>



	</tbody>

</table>


kde jako parametr funcim predavam cislo radku, coz je samozrejme spatne protoze pokud sprehazim tabulku tak uz to nefunguje korektne a prehazuje to jine radky. Je nejaka moznost jak zjistit poradi radku a nebo bude jednodussi to delat pomoci id radku?
Ze kazdy radek dostane id a to pak budu davat jako parametr?

Omlouvam se ze tak otravuju ale v JS jsem zatim "LAMA"
los
Profil *
#6 · Zasláno: 24. 1. 2007, 22:36:43
Odpovědět Citovat
Možnosti:
1. jedna obsluha udalosti click na celú tabuľku - pri kliknutí na hociktorú bunku sa vyhodnotí, či sa má riadok posunúť alebo nie.
2. nastaviť v každom riadku pre vybrané bunky obslužnú funkciu, ktorá posunie riadok.

V oboch prípadoch je vhodné nastaviť triedu bunkám, ktoré majú posúvať riadky. Napr. ak bunka posúva riadok hore, bude mať nastavený atribút class na "up" a ak dole, tak "down". Ak sa rozhodneš pre prvú možnosť, budeš sa podľa tohto atribútu rozhodovať, kam sa má riadok posunúť, ak pre druhú možnosť, tak podľa toho atribútu budeš nastavovať obslužnú funkciu pri inicializácii tabuľky.

Prvá možnosť: 
document.getElementById("tabulka").onclick = function(e) {

	e = e || window.event;

	var target = e.target? e.target: e.srcElement;

	var dir = null;

	

	while (target && target != this && target.tagName != "TR") {

		if (target.tagName == "TD") {

			if (/(^|s)up(s|$)/.test(target.className))

				dir = "previousSibling";

			else if (/(^|s)down(s|$)/.test(target.className))

				dir = "nextSibling";

		}

			

		target = target.parentNode;

	}

	

	if (dir && target && target != this) {

		var sibling = target;

		

		do {

			sibling = sibling[dir];

		} while (sibling && (sibling.nodeType != 1 || sibling.tagName != "TR"))

			

		if (sibling)

			swap(target, sibling);

	}

}

Je tam použitých pár fínt, ale postup je asi taký: v prvom cykle nájdeme riadok, na ktorý sa kliklo, v druhom cykle nájdeme druhý riadok, s ktorým ho chceme vymeniť a nakoniec sa to vymení.

Funkcia swap vyzerá podobne ako v mojom predchádzajúcom príspevku, ale je doplnená ešte o nejakú kontrolu, aby to zvládala aj Opera so svojimi bugmi v JavaScripte: 
function swap(el1, el2) {

	var parent = el1.parentNode;

	var next1 = el1.nextSibling;

	var next2 = el2.nextSibling;



	if (el1 != next2)

		parent.insertBefore(el1, next2);

	

	if (el2 != next1)

		parent.insertBefore(el2, next1);

}


Druhá možnosť by vyzerala podobne: Boli by dve funkcie, ktoré by sa podobali na tú čo som napísal (jedna by bola pre posun hore, druhá pre posun dole). Tie by si na začiatku zavesil v cykle na obsluhu udalosti click príslušných buniek.
PetrPan
Profil *
#7 · Zasláno: 25. 1. 2007, 16:58:34
Odpovědět Citovat
Tak jsem si to tedokn udelal nasledovne: Bohuzel mi toto reseni funguje pouze ve FF a v IE a Opere ne. Mohl by mi nekdo poradit co tam mam opravit aby mi to fungovali ve trech techto hlavnich prohlizecich prosim? 


<html>

	<head>

<style type="text/css">

td {background: red;}

</style>

	</head>

	<body>

	

	<script type="text/javascript">

	function move(objekt, up){

		tabulka = document.getElementById('tabulka');

		riadky = tabulka.getElementsByTagName("tr");

	

	 	for (i=0;i<(riadky.length);i++){

  			if(objekt == riadky[i]){

				var predchozi = i - 1;

				var tento = i;

				var dalsi = i + 1;		

				break;

			}	

  		}

  		

  		if(tento == 0 && up == true){

			return;  

		}

		

  		if(tento == riadky.length - 1 && up == false){

			return;  

		}



  		

		if(up == true){

			var el1 = riadky[tento];

			var el2 = riadky[predchozi];	

		}

		else{

			var el1 = riadky[tento];

			var el2 = riadky[dalsi];

		

		}

		

		var parent = el1.parentNode;



		var next1 = el1.nextSibling;



		var next2 = el2.nextSibling;





		parent.insertBefore(el2, next1);



		parent.insertBefore(el1, next2);	

		

		



 	}

	</script>

<table id="tabulka">

	<tbody>

	    <tr>

	        <td>prvni radek</td>

	        <td onclick="move(this.parentNode, true);">up</td>

	        <td onclick="move(this.parentNode, false);">down</td>

		</tr>

	    <tr>

	        <td>druhy radek</td>

	        <td onclick="move(this.parentNode, true);">up</td>

	        <td onclick="move(this.parentNode, false);">down</td>

		</tr>

	    <tr>

	        <td>treti radek</td>

	        <td onclick="move(this.parentNode, true);">up</td>

	        <td onclick="move(this.parentNode, false);">down</td>

		</tr>

	    <tr>

	        <td>ctvrty radek</td>

	        <td onclick="move(this.parentNode, true);">up</td>

	        <td onclick="move(this.parentNode, false);">down</td>

		</tr>

	    <tr>

	        <td>paty radek</td>

	        <td onclick="move(this.parentNode, true);">up</td>

	        <td onclick="move(this.parentNode, false);">down</td>

		</tr>



	</tbody>

</table>

	</body>

</html>
PetrPan
Profil *
#8 · Zasláno: 25. 1. 2007, 17:00:02
Odpovědět Citovat
IE - haze chyby
Opera - posouva pouze nahoru ale ne dolu
FF - funguje vsechno, zadne chybove hlaseni
los
Profil *
#9 · Zasláno: 25. 1. 2007, 17:37:03
Odpovědět Citovat
Ak chceš, aby to fungovalo aj v Opere, tak nahraď riadky: 
parent.insertBefore(el2, next1);

parent.insertBefore(el1, next2);

za 
if (el1 != next2)

	parent.insertBefore(el1, next2);

	

if (el2 != next1)

	parent.insertBefore(el2, next1);


Keď som Tvoj kód skopíroval bez zmeny a spustil v IE, tak mi šiel. Ak to naozaj hádže chyby, pomohlo by chybové hlásenie.
PetrPan
Profil *
#10 · Zasláno: 25. 1. 2007, 19:53:40
Odpovědět Citovat
Dik za typ. Ted mi to jde i v Opere. V IE stale nejde. Predtim sem to mel na Win2000, IE6 a nedelalo to nic, jen myslim ze to hazelo nejaky chyby, neco s tim parent myslim, ale ruku za to do ohne nedam. A ted doma na Win XP, IE6 mi to chybu nehlasi ale taky to nic nedela. Takze problem bude zrejme s tim 
this.parentNode
PetrPan
Profil *
#11 · Zasláno: 25. 1. 2007, 19:53:40
Odpovědět Citovat
Dik za typ. Ted mi to jde i v Opere. V IE stale nejde. Predtim sem to mel na Win2000, IE6 a nedelalo to nic, jen myslim ze to hazelo nejaky chyby, neco s tim parent myslim, ale ruku za to do ohne nedam. A ted doma na Win XP, IE6 mi to chybu nehlasi ale taky to nic nedela. Takze problem bude zrejme s tim 
this.parentNode
los
Profil *
#12 · Zasláno: 25. 1. 2007, 23:30:38
Odpovědět Citovat
Mne to ide v IE (aj na Win2000, aj na WinXP). Nemáš v tom kóde doma niečo ďalšie? Nenačítava sa tá stránka z cache? Máš zapnutý JavaScript (nj, asi blbá otázka)? Mohol by si to dať na web, aby sa na to nefungujúce dalo pozrieť?
PetrPan
Profil *
#13 · Zasláno: 26. 1. 2007, 07:16:21
Odpovědět Citovat
http://alfa.pockej.cz/pokus.php

Radek : 11, Znak 3, Objekt tuto vlastnost nebo metodu nepodporuje.
los
Profil *
#14 · Zasláno: 26. 1. 2007, 07:23:51
Odpovědět Citovat
Aha, keď som prekopíroval Tvoj kód, tak som tam musel doplniť deklaráciu premenných použitím kľúčového slova var a potom som na to zabudol. Takže aby to fungovalo aj v IE, musíš deklarovať premennú tabulka, pretože tak, ako to je napísané teraz, to používa globálnu premennú tabulka. A keďže existuje prvok s id="tabulka", tak sa to medzi sebou bije. Pri tej príležitosti by bolo dobré deklarovať aj ostatné lokálne premenné: riadky a i.

Takže stačí upraviť začiatok skriptu takto: 
var tabulka = document.getElementById('tabulka');

var riadky = tabulka.getElementsByTagName("tr");

	 	

for (var i=0;i<(riadky.length);i++){
PetrPan
Profil *
#15 · Zasláno: 26. 1. 2007, 09:37:54
Odpovědět Citovat
O dekuji ti:) Uz mi to bezi vsude:)))
Časová prodleva: 17 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0