Auto Zebra Tables

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

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

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

Auto Zebra Tables

Δημοσίευση από cherouvim » 19 Μαρ 2006 10:36

Η applyZebra() είναι μία μέθοδος που για όσα HTML tables έχουν την κλάση 'zebra' θα εφαρμόσει στις γραμμές τους (στα tr στοιχεία τους) την κλάση 'zebrarow'. Αυτό θα συμβέι ανά 2 γραμμές και με το CSS μπορούμε να δώσουμε το στυλ που θέλουμε. Η applyZebra() σέβεται τα HTML στοιχεία thead, tbody και tfoot, και επιβιώνει και από το bug του IE που θέλει να βλέπει τα στοιχεία thead και tfoot ώς tr.

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

function applyZebra() {
	var tables = document.getElementsByTagName("table");
	for&#40;var i=0, length=tables.length; i<length; i++&#41; &#123;
		if &#40;tables&#91;i&#93;.className.indexOf&#40;"zebra"&#41;>=0&#41; &#123;
			var tbody = tables&#91;i&#93;.getElementsByTagName&#40;"tbody"&#41;;
			var trs = &#40;tbody&#91;0&#93;?tbody&#91;0&#93;&#58;tables&#91;i&#93;&#41;.getElementsByTagName&#40;"tr"&#41;;
			for&#40;var j=0, lengthj=trs.length; j<lengthj; j++&#41; &#123;
				if &#40;j%2==0&#41;
					trs&#91;j&#93;.className='zebrarow';
			&#125;
		&#125;
	&#125;
&#125;
Μπορούμε να την τρέξουμε κάπως έτσι

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

window.onload=function&#40;&#41; &#123;
	if&#40;document.getElementById&#41; &#123;
		applyZebra&#40;&#41;;
	&#125;
&#125;
Με μία δήλωση στο head του markup μας

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

<script type='text/javascript' src='script.js'></script>
Για να εφαρμοστεί η συμπεριφορά στο table που θέλουμε του προσθέτουμε την κλάση "zebra".

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

	<table class="zebra">
		<tr><td>1</td><td>2</td></tr>
		<tr><td>a</td><td>b</td></tr>
	</table>

	<table class="zebra someotherclass">
		<tr><td>1</td><td>2</td></tr>
		<tr><td>a</td><td>b</td></tr>
	</table>


	<table class='zebra'>
 	<caption>Table with thead, tbody and tfoot.</caption>
	<thead><th>id</th><th>name</th><th>age</th><th>link</th></thead>
	<tbody>
		<tr><td>1</td><td>foo</td><td>123</td><td><a href='http&#58;//www.stylegala.com'>stylegala</a></td></tr>
		<tr><td>2</td><td>bar</td><td>345</td><td><a href='http&#58;//www.alistapart.com'>alistapart</a></td></tr>
		<tr><td>3</td><td>foobar</td><td>678</td><td><a href='http&#58;//www.htmldog.com'>htmldog</a></td></tr>
		<tr><td>4</td><td>example.com</td><td>45</td><td><a href='http&#58;//www.joelonsoftware.com'>joelonsoftware</a></td></tr>
		<tr><td>5</td><td>foo bar</td><td>906</td><td><a href='http&#58;//www.slashdot.com'>slashdot</a></td></tr>
		<tr><td>6</td><td>domain.com</td><td>65</td><td><a href='http&#58;//www.w3.org/'>w3c</a></td></tr>
		<tr><td>7</td><td>foo.domain.com</td><td>24</td><td><a href='http&#58;//www.showcase.gr'>showcase</a></td></tr>
		<tr><td>8</td><td>bar.example.com</td><td>767</td><td><a href='http&#58;//www.google.com'>google</a></td></tr>
		<tr><td>9</td><td>foo-bar</td><td>45</td><td><a href='http&#58;//www.wikipedia.org'>wikipedia</a></td></tr>
	</tbody>
	<tfoot><th colspan='4'>Auto Zebra Tables with thead, tbody and tfoot</th></tfoot>
	</table>
Live demo

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

Auto Zebra Tables

Δημοσίευση από cordis » 19 Μαρ 2006 12:26

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

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

Auto Zebra Tables

Δημοσίευση από panosru » 19 Μαρ 2006 16:29

ontos oraio kolpo! :D

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

Auto Zebra Tables

Δημοσίευση από skeftomilos » 21 Μαρ 2006 22:27

Ένα παρόμοιο script έχει δημοσιευτεί και στο ALA: Zebra Tables

Στην περίπτωση που κάποιες row είναι ήδη εφοδιασμένες με class στο markup, αυτή θα αντικατασταθεί. Αντί για αντικατάσταση είναι μάλλον προτιμότερη η προσθήκη δεύτερης κλάσης στην υπάρχουσα.

Ένα άλλο πρόβλημα είναι ότι το script θα καθυστερήσει να τρέξει σε μια μεγάλη σελίδα με βαριά γραφικά. Υπάρχει ένα σκριπτάκι που ασχολείται με αυτό το πρόβλημα εδώ: Κάτι τρέχει με το window.onload.

Σε συνδυασμό όλα μαζί μας δίνουν το παρακάτω:

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

<script type="text/javascript" src="progressive-load.js"></script>
<script type="text/javascript">
  progressiveListLoad&#40;document.getElementsByTagName&#40;'tbody'&#41;, function&#40;tbody&#41; &#123;
    if &#40;tbody.parentNode.className.indexOf&#40;'zebra'&#41; >= 0&#41; &#123;
      progressiveListLoad&#40;tbody.getElementsByTagName&#40;'tr'&#41;, function&#40;tr, index&#41; &#123;
        if &#40;index % 2 == 0&#41; tr.className += tr.className ? ' zebrarow' &#58; 'zebrarow'
      &#125;&#41;
    &#125;
  &#125;&#41;
</script>
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

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

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

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