Visualizzazione dei risultati da 1 a 7 su 7

Discussione: Tabella bicolore

  1. #1
    Utente di HTML.it
    Registrato dal
    Mar 2009
    Messaggi
    500

    Tabella bicolore

    codice:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento senza titolo</title>
    <script language="javascript">
    function tabella_bicolore(){
    	//1. Raggruppiamo tutti i tag <tr>
    	var righe= document.getElementsByTagName("tr")
    	alert("Entra")
    	for(i=0;i<righe.length;i+=2){
    	Core.addClass(righe[i],"alt")
    }
    }
    </script>
    <style type="text/css">
    tr.alt{
    	background-color:#009;
    }
    </style>
    </head>
    
    <body>
    <table border="1" width="100%">
    <tr>
    <td>
    Ciao
    </td>
    </tr>
    <tr>
    <td>
    Ciao
    </td>
    </tr>
    <tr>
    <td>
    Ciao
    </td>
    </tr>
    <tr>
    <td>
    Ciao
    </td>
    </tr>
    <tr>
    <td>
    Ciao
    </td>
    </tr>
    <tr>
    <td>
    Ciao
    </td>
    </tr>
    </table>
    <input type="button" onclick="tabella_bicolore();" />
    </body>
    </html>
    Vorrei fare una tabella una riga si e una no colorata, cosa sbaglio? Ho preso spunto da un libro che sto seguendo

    Dice che Core non è definito!

  2. #2
    Utente di HTML.it
    Registrato dal
    Mar 2009
    Messaggi
    500
    Ora ho capito, devo creare le funzioni per aggiungere la classe

  3. #3
    fai in questo modo:
    codice:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento senza titolo</title>
    <script language="javascript">
    function tabella_bicolore(){
    	//1. Raggruppiamo tutti i tag <tr>
    	var righe= document.getElementsByTagName("tr")
    	alert("Entra")
    	for(i=0;i<righe.length;i++){
    	if((i+1)%2==0){
    
    righe[i].style.backgroundColor="#009";}
    else{righe[i].style.backgroundColor="white";}
    }
    
    }
    </script>
    
    </head>
    
    <body>
    <table border="1" width="100%">
    <tr><td>Ciao</td></tr>
    <tr><td>Ciao</td></tr>
    <tr><td>Ciao</td></tr>
    <tr><td>Ciao</td></tr>
    <tr><td>Ciao</td></tr>
    <tr><td>Ciao</td></tr>
    <tr><td>Ciao</td></tr>
    
    </table>
    
    
    <input type="button" onclick="tabella_bicolore();" Value="Cambia" />
    </body>
    </html>

  4. #4
    Utente di HTML.it
    Registrato dal
    Mar 2009
    Messaggi
    500
    Grazie per l'aiuto, ma io sto imparando ad assegnare le classi ai vari tag

    Cmq per evitare gli if vari fai semplicemente cosi:

    for(i=0;i<righe.length;i+=2){
    righe[i].style.backgroundColor="#009";
    }

    Fai diretttamente + 2

  5. #5
    Utente di HTML.it
    Registrato dal
    Mar 2009
    Messaggi
    500
    Novità nel codice:

    file .html
    codice:
    <html>
    <head>
    <title>Tabella Bicolore</title>
    <script language="javascript" src="core.js"></script>
    <script language="javascript">
    function tabella_bicolore(){
    	var righe= document.getElementsByTagName("tr")
    	for(i=0;i<righe.length;i+=2){
    		Core.addClass(righe[i], "alt")
    	}
    
    }
    </script>
    
    
    <style type="text/css">
    tr.alt{
    	background-color:#CCC;
    }
    </style>
    </head>
    
    <body>
    <table border="1" width="100%">
    <tr><td>Ciao</td></tr>
    <tr><td>Ciao</td></tr>
    <tr><td>Ciao</td></tr>
    <tr><td>Ciao</td></tr>
    <tr><td>Ciao</td></tr>
    <tr><td>Ciao</td></tr>
    <tr><td>Ciao</td></tr>
    </table>
    
    
    <input type="button" onClick="tabella_bicolore();" Value="Cambia" />
    </body>
    </html>
    file .js
    codice:
    Core.hasClass = function(target, theClass)
    {
    	var pattern = new RegExp("(^| )" + theClass + "( |$)");
    	
    	if(pattern.text(target.className)){
    		return true;
    	}
    	return false;
    }
    
    Core.addClass= function(target, theClass)
    {
    	if(!Core.hasClass(target, theClass)){
    		if(target.className == ""){
    			target.className = theClass;
    		}
    		else{
    			target.className += " " + theClass;
    		}
    	}
    }
    Come mai non va?

  6. #6

  7. #7
    Utente di HTML.it
    Registrato dal
    Mar 2009
    Messaggi
    500
    Sisi, mi ero dimenticato la libreria per prelevare ed aggiungere la classe...

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.