Alternate Colours In Tables

Dynamically create alternate colours.

Alternate Row Colour

Alternate	Coloured	Rows	And/Or	Text
Alternate	Coloured	Rows	And/Or	Text
Alternate	Coloured	Rows	And/Or	Text
Alternate	Coloured	Rows	And/Or	Text
Alternate	Coloured	Rows	And/Or	Text
Alternate	Coloured	Rows	And/Or	Text
Alternate	Coloured	Rows	And/Or	Text
Alternate	Coloured	Rows	And/Or	Text

The trick here is to use the Modulos operator to find if the row is odd or even

rowCount % 2 = remainder

If remainder equals zero
then the row number is even, use this colour
else
remainder equals one then the row number is odd, use this colour

<script type="text/javascript">

function colourRows(){
rowEl=document.getElementById("tab").getElementsByTagName("tr")

for(var rowCount=0; rowCount<rowEl.length; rowCount++){

if((rowCount+1) % 2 == 0) {
rowEl[rowCount].style.backgroundColor="#445544"
rowEl[rowCount].style.color="#77aa77"
}
else{
rowEl[rowCount].style.backgroundColor="#77aa77"
rowEl[rowCount].style.color="#445544"
}

}

}

</script>

Alternate Column Colour

Alternate	Coloured	Columns	And/Or	Text
Alternate	Coloured	Columns	And/Or	Text
Alternate	Coloured	Columns	And/Or	Text
Alternate	Coloured	Columns	And/Or	Text
Alternate	Coloured	Columns	And/Or	Text
Alternate	Coloured	Columns	And/Or	Text
Alternate	Coloured	Columns	And/Or	Text
Alternate	Coloured	Columns	And/Or	Text

<script type="text/javascript">

function colourCols(){
var rowEl=document.getElementById("tab2").getElementsByTagName("tr")

for(var rowCount=0; rowCount<rowEl.length; rowCount++){

cellEl=rowEl[rowCount].childNode
cellCount = 1

for (var columnCount=0; columnCount>c.length; columnCount++) {
if(cellEl[columnCount].nodeType == 1){
if(cellCount % 2 == 0){
rowEl[rowCount].style.backgroundColor="#555544"
rowEl[rowCount].style.color="#aaaa77"
}
else{
cellEl[columnCount].style.backgroundColor="#aaaa77"
cellEl[columnCount].style.color="#555544"
}
}

cellCount++

}

}
}

</script>

Alternate Cell Colour

Alternate	Coloured	Cells	And/Or	Text
Alternate	Coloured	Cells	And/Or	Text
Alternate	Coloured	Cells	And/Or	Text
Alternate	Coloured	Cells	And/Or	Text
Alternate	Coloured	Cells	And/Or	Text
Alternate	Coloured	Cells	And/Or	Text
Alternate	Coloured	Cells	And/Or	Text
Alternate	Coloured	Cells	And/Or	Text

<script type="text/javascript">

col1="#554444"
col2="#aa7777"

function colourCells(){
rows=document.getElementById("tab3").getElementsByTagName("tr")
totalRows=rows.length
cells=document.getElementById("tab3").getElementsByTagName("td")

cellsPerRow=rows[0].cells.length

for (var rowCount=0; rowCount<totalRows; rowCount++) {

for (var cellCount=0; cellCount<cellsPerRow; cellCount++) {

if((rowCount+1) % 2 == 0){

if((cellCount+1) % 2 == 0){
rows[rowCount].cells[cellCount].style.backgroundColor=col2
rows[rowCount].cells[cellCount].style.color=col1
}
else{
rows[rowCount].cells[cellCount].style.backgroundColor=col1
rows[rowCount].cells[cellCount].style.color=col2
}

}
else{

if((cellCount+1) % 2 == 0){
rows[rowCount].cells[cellCount].style.backgroundColor=col1
rows[rowCount].cells[cellCount].style.color=col2
}
else{
rows[rowCount].cells[cellCount].style.backgroundColor=col2
rows[rowCount].cells[cellCount].style.color=col1
}

}

}

}

}

</script>