Πως μπορω να μετακινήσω 2 table cells μεταξύ τους?

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
PhotoPaul
Δημοσιεύσεις: 45
Εγγραφή: 26 Φεβ 2004 18:35

Πως μπορω να μετακινήσω 2 table cells μεταξύ τους?

Δημοσίευση από PhotoPaul » 28 Αύγ 2005 11:03

έστω οτι έχω 2 table cells (ίδιου μεγέθους) των οποίων το περιεχόμενο θέλω να ανταλλάξω χωρίς να κάνω reload τη σελίδα. Προφανώς χρειάζεται javascript. Είναι δυνατό αυτό;

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Πως μπορω να μετακινήσω 2 table cells μεταξύ τους?

Δημοσίευση από cherouvim » 28 Αύγ 2005 11:51

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml" xml&#58;lang="el" lang="el">
<head>
	<script type='text/javascript' src='script.js'></script>
	<style>
	<!--
		table tr td &#123;
			border&#58; 1px dotted black;
		&#125;
	-->
	</style>
</head>
<body>
	<a href='#' id='swapper'>swap them</a>
	<table>
		<tr><td id='swap1'>foo</td><td id='swap2'>bar</td></tr>
	</table>
</html>

Κώδικας: Επιλογή όλων

window.onload=init;
function init&#40;&#41; &#123;

	if&#40;document.getElementById && document.createTextNode&#41; &#123;
		var swapper=document.getElementById&#40;'swapper'&#41;;
		swapper.onclick=function&#40;&#41;&#123;
			var swap1 = document.getElementById&#40;'swap1'&#41;;
			var swap2 = document.getElementById&#40;'swap2'&#41;;
			var temp = swap1.innerHTML;
			swap1.innerHTML = swap2.innerHTML;
			swap2.innerHTML = temp;
		&#125;
	&#125;
&#125;
check it live @ http://temp.cherouvim.com/foobar.html

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Πως μπορω να μετακινήσω 2 table cells μεταξύ τους?

Δημοσίευση από skeftomilos » 29 Αύγ 2005 04:29

Nice demo! :D Επιτρέπονται λίγες παρατηρήσεις; :)

1) Λαθάκι, λείπει το tag </body> και το XHTML έγγραφο είναι invalid. Επίσης το attribute type στο tag <style> είναι υποχρεωτικό. Το lang="el" πρέπει να μπαίνει μόνο όταν το κείμενο είναι όντως ελληνικό, διαφορετικά τα ατόμα με προβλήματα όρασης θα ακούν τον screen reader τους να διαβάζει το αγγλικό κείμενο με ελληνική προφορά και τονισμό! :)

2) Πολύ σωστός ο έλεγχος if (document.getElementById) αλλά το document.createTextNode δε χρησιμοποιείται πουθενά.

3) Σωστή επιλογή η τοποθέτηση του κώδικα σε εξωτερικό αρχείο. Επίσης σωστή και σύμφωνη με τις αρχές τις unobtrusive JavaScript η σύνδεση των συμβάντων στο window.onload. Το .html αρχείο δεν έχει ίχνος JavaScript, nice!

4) Το href='#' θεωρείται λάθος. Σε ορισμένους browsers προκαλεί scrolling-to-top όταν δεν υπάρχει JavaScript. Καλύτερα href='javascript:;'. Θα ήθελα να μπορούσα να πω ότι τα buttons είναι καλύτερα από τα links γι αυτού του είδους τις δουλειές, αλλά τα links είναι πιο όμορφα! Πάντως clickable divs, spans, td κ.λπ. είναι εκτός συζήτησης γιατί δεν είναι accessible χωρίς mouse.

5) Ο χειριστής συμβάντος onclick πρέπει να επιστρέφει false (return false), διαφορετικά εκτελείται και η εντολή στο href.

6) Το script χάνει μνήμη στον IE (memory-leak). Είναι εύκολο να διαπιστωθεί. Ανοίγουμε τον Task Manager στο tab Processes και βρίσκουμε τη γραμμή IEXPLORE.EXE. Μετά κάνουμε πολλά συνεχόμενα refresh στον ΙΕ και παρατηρούμε αν η memory usage αυξάνει. Αυξάνει! Αν τα links ήταν περισσότερα, η memory-leak θα ήταν πιο σοβαρή. Αν o κώδικας υπάρχει σε όλες τις σελίδες του site μας και ο επισκέπτης πηγαίνει από σελίδα σε σελίδα, η διαρροή θα συσσωρεύεται και οι συνέπειες θα είναι δυσάρεστες. Η μόνη λύση για ανάκτηση της μνήμης από τον επισκέπτη θα είναι να κλείσει και να ξανανοίξει τον IE. Όχι μόνο το τρέχον παράθυρο αλλά όλα τα ανοιχτά παράθυρα.

Ανταλλαγή τιμών σε table cells συμβαίνει και σε αυτό το demo που δείχνει ένα sortable table. Δηλαδή αν κάνουμε κλικ σε μία κεφαλίδα, οι γραμμές του table ταξινομούνται με βάση τα δεδομένα στη στήλη αυτή.

Κι ένα δικό μου demo ταξινόμησης. :)
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27616
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

Πως μπορω να μετακινήσω 2 table cells μεταξύ τους?

Δημοσίευση από cordis » 29 Αύγ 2005 11:44

απίστευτο demo! :o
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

emphasy
Honorary Member
Δημοσιεύσεις: 4303
Εγγραφή: 16 Ιαν 2005 10:31

Πως μπορω να μετακινήσω 2 table cells μεταξύ τους?

Δημοσίευση από emphasy » 29 Αύγ 2005 12:23

Όντως :o Μπράβο Σκεφτόμιλε!

Άβαταρ μέλους
Rapid-eraser
WebDev Moderator
Δημοσιεύσεις: 6851
Εγγραφή: 05 Απρ 2003 17:50
Τοποθεσία: Πειραιάς
Επικοινωνία:

Πως μπορω να μετακινήσω 2 table cells μεταξύ τους?

Δημοσίευση από Rapid-eraser » 29 Αύγ 2005 12:52

To memory-leak giati dimiourgite ?
Fteei pou xrisimopiei sivexeia tis bon8itikes metablites gia va metaferei to periexomevo ?
Mipos iparxei kapoios tropos va to perioriseis afto to problima programatistika ?
Cu, Rapid-eraser, Tα αγαθά copies κτώνται.
Love is like oxygen, You get too much you get too high
Not enough and you're gonna die, Love gets you high

Άβαταρ μέλους
xmavidis
Honorary Member
Δημοσιεύσεις: 1217
Εγγραφή: 02 Δεκ 2003 19:59
Τοποθεσία: Ηράκλειο

Πως μπορω να μετακινήσω 2 table cells μεταξύ τους?

Δημοσίευση από xmavidis » 29 Αύγ 2005 13:42

Φοβερό! :D
I want to know God’s thoughts; the rest are details.
Albert Einstein

Άβαταρ μέλους
Dr_Java
Δημοσιεύσεις: 218
Εγγραφή: 15 Αύγ 2003 16:42
Τοποθεσία: πειραιας
Επικοινωνία:

Πως μπορω να μετακινήσω 2 table cells μεταξύ τους?

Δημοσίευση από Dr_Java » 30 Αύγ 2005 01:45

Και τώρα σου βγάζω το καπέλο..... Εικόνα Εικόνα

Φ Ο Β Ε Ρ Ο Σ
Εικόνα

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Πως μπορω να μετακινήσω 2 table cells μεταξύ τους?

Δημοσίευση από skeftomilos » 30 Αύγ 2005 10:48

Thanks guys! Δεν είναι τίποτα τρομερό όμως, just coding. :)

@Rapid-eraser: Το memory-leak στον IE δημιουργείται όταν υπάρχουν circular references. Δηλαδή όταν δύο elements αναφέρονται το ένα στο άλλο, ο μηχανισμός αποδέσμευσης μνήμης του IE δε μπορεί να καταλάβει αν είναι άχρηστα ή όχι και τα διατηρεί στη μνήμη, ακόμα και όταν έχει αλλάξει σελίδα ο browser. Αυτό συμβαίνει μόνο με τα DOM elements και όχι με τα αντικείμενα JavaScript γιατί γι αυτά υπάρχει διαφορετικός και καλύτερος τρόπος αποδέσμευσης μνήμης (garbage collector). Οι άλλοι browsers δεν έχουν τέτοια προβλήματα, ή τα έχουν σε ελάχιστο βαθμό.

Το πρόβλημα μπορεί βασικά να λυθεί με δύο τρόπους. Ο ένας είναι να αποφύγουμε εξαρχής τις circular references. Ο άλλος είναι να τις αφαιρέσουμε στο window.onunload:

Κώδικας: Επιλογή όλων

window.onunload = function&#40;&#41; &#123;
  document.getElementById&#40;'swapper'&#41;.onclick = null
&#125;
Το θέμα βγήκε στη δημοσιότητα φέτος στις αρχές του χρόνου. Φυσικά υπήρχε ήδη από την εποχή του IE5, αλλά το DOM scripting μόνο τελευταία έγινε αρκετά δημοφιλές ώστε να βγει στην επιφάνεια. Ένα άρθρο της Microsoft που περιγράφει αναλυτικά το ζήτημα: MSDN
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Cmg__
Δημοσιεύσεις: 1710
Εγγραφή: 29 Μαρ 2005 22:40

Πως μπορω να μετακινήσω 2 table cells μεταξύ τους?

Δημοσίευση από Cmg__ » 02 Σεπ 2005 01:23

To kalytero soy demo!!!!!!!!!!!!!
GaV

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27616
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

Πως μπορω να μετακινήσω 2 table cells μεταξύ τους?

Δημοσίευση από cordis » 02 Σεπ 2005 13:47

Μέχρι το επόμενο... ;)
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες