✔ Spalten auswählen

S

stathis2000

Mitglied
Hallo zusammen,

weiß jemand ob, und wenn ja wie man mit JavaScript eine bestimmte Spalte in einer Tabelle auswählen kann, indem man bspw. egal wo in der Spalte draufklickt oder die Spaltenüberschtift anklickt und sich diese Spalte daraufhin farbig von den anderen unterscheidet?

Vielen Dank
 
onclick wäre der Event deiner Wahl und über Element.style.backgroundColor = "#FF0000" für z.B. Rot kannst du die Hintergrundfarbe eines beliebigen Elementes verändern.
 
Danke aber das wäre aber dann nur für diese eine Zelle, oder?
Um aber eine ganze Spalte (mit mehreren Zellen) auszuwählen muss ich den einzelnen Zellen dieser Spalte doch eine bestimmte ID vergeben. Wie mache ich das am besten?
 
Hallo nochmal und danke für den Tipp!
Hier mein Lösungsweg wenn es noch jemanden interessieren sollte:

Code: 
    <html>
    <head>
    <title>TEST</title>
    </head>
    <!--Für jede Spalte so eine Funktionen wie diese-->
    	<script type="text/javascript">
    		function Faerben0 () {
 			for (var i=0; i<document.getElementsByTagName('td').length; i++) {
 		 	if (document.getElementsByTagName('td')[i].id.substr(0,9)=='gruppe_00') {
 		 	 document.getElementsByTagName('td')[i].style.backgroundColor = '#66ADD1';
    
    				} else {
 		 		if (document.getElementsByTagName('td')[i].id.substr(0,6)=='gruppe') {
 		 		 document.getElementsByTagName('td')[i].style.backgroundColor = '#F5F5F5';
    					}
    				}
    			}
    		}
    	</script>
  
     	<script type="text/javascript">
     		function Faerben1 () {
 			for (var i=0; i<document.getElementsByTagName('td').length; i++) {
     
 		 	if (document.getElementsByTagName('td')[i].id.substr(0,9)=='gruppe_01') {
 		 	 document.getElementsByTagName('td')[i].style.backgroundColor = '#66ADD1';
     
     				} else {
 		 		if (document.getElementsByTagName('td')[i].id.substr(0,6)=='gruppe') {
 		 		 document.getElementsByTagName('td')[i].style.backgroundColor = '#F5F5F5';
     					}
     				}
     			}
     		}
     	</script>
   
 <!-- usw.-->
 
  </head>
    
    <body>
    <table cellspacing="0">
    	<tr>
    		<td id="gruppe_00_1" onClick="javascript:Faerben0()">Erklärungen</td>
    		<td id="gruppe_01_1" onClick="javascript:Faerben1()">Angebot&nbsp;1</td>
    		<td id="gruppe_02_1" onClick="javascript:Faerben2()">Angebot&nbsp;2</td>
    		<td id="gruppe_03_1" onClick="javascript:Faerben3()">Angebot&nbsp;3</td>
    		<td id="gruppe_04_1" onClick="javascript:Faerben4()">Angebot&nbsp;4</td>
    	</tr>
    	<tr>
    		<td id="gruppe_00_2" onClick="javascript:Faerben0()">Durchführungsweg</td>
    		<td id="gruppe_00_2" onClick="javascript:Faerben1()">entfällt</td>
    		<td id="gruppe_02_2" onClick="javascript:Faerben2()">entfällt</td>
    		<td id="gruppe_03_2" onClick="javascript:Faerben3()">entfällt</td>
    		<td id="gruppe_04_2" onClick="javascript:Faerben4()">entfällt</td>
    	</tr>
    
    	<tr>
    		<td id="gruppe_00_3" onClick="javascript:Faerben0()">&nbsp;</td>
    		<td id="gruppe_01_3" onClick="javascript:Faerben1()">&nbsp;</td>
    		<td id="gruppe_02_3" onClick="javascript:Faerben2()">&nbsp;</td>
    		<td id="gruppe_03_3" onClick="javascript:Faerben3()">&nbsp;</td>
    		<td id="gruppe_04_3" onClick="javascript:Faerben4()">&nbsp;</td>
    	</tr>
    </table>
    
    </body>
    </html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück