Ce script permet d'afficher les lignes d'un tableau avec des couleurs de fonds et autres caractéristiques différentes pour les lignes paires et impaires.

This script allows to show the lines of a table with different background colors and other characteristics for even and odd lines.

Exemple :

Example:

Copier ceci dans la section <HEAD> entre des étiquettes <STYLE>et </STYLE> ou dans un fichier .css relié.

Copy this in the <HEAD> section between <STYLE> and </STYLE> tags or in a .css linked file.

Sélectionner tout et copier dans le Presse-papier (IE)

Select all and copy in the Clipboard (IE)

.Table {
	border: 2px #FFCC99 solid;
	}
.Header {
	border-bottom: 2px #FFCC99 solid;
	}
.Title {
	font-family: Arial;
	font-size: 11pt;
	font-weight: bold;
	color: #FFCC99;
	background: none;
	}
#Nbr, #Dte, #Txt, #Amt {
	font-family: Arial;
	font-size: 9pt;
	color: #000000;
	background: none;
	border: none;
}
#Nbr {
	width: 40px;
	text-align: right;
	padding-right: 10px;
	}
#Dte {
	width: 80px;
	text-align: center;
	}
#Txt {
	width: 200px;
	text-align: left;
	padding-left: 10px;
	}
#Amt {
	width: 80px;
	text-align: right;
	padding-right: 10px;
	}

Copier ceci dans la section <HEAD> entre des étiquettes <SCRIPT>et </SCRIPT> ou dans un fichier .js relié.

Copy this in the <HEAD> section between <SCRIPT> and </SCRIPT> tags or in a .js linked file.

Sélectionner tout et copier dans le Presse-papier (IE)

Select all and copy in the Clipboard (IE)

function ldTable() {
document.write('<table id="Alternate" border=0 cellpadding=0 cellspacing=5');
document.write(' align="center" class="Table">');
document.write('<tr class="Title">');
for(h=0; h<Header.length; h++) {
	document.write('<td align="center" class="Header">');
	document.write(Header[h][1]);
	document.write('</td>');
	}
document.write('</tr><tbody>');
for(n=0; n<Line.length; n++) {
	document.write('<tr>');
	for(h=0; h<Header.length; h++) {
		document.write('<td><input type="text" id="'+Header[h][0]+'" name="'+Header[h][1]+'"');
		document.write(' value="'+Line[n][h]+'"></td>');
		}
	document.write('</tr>');
	}
document.write('</tbody></table>');
}
// this function is needed to work around 
// a bug in IE related to element attributes
function ldAtribute(obj) {
	var result = false;
	if (obj.getAttributeNode("class") != null) {
		result = obj.getAttributeNode("class").value;
		}
	return result;
} 

function ldAlternate(id) {
// the flag we'll use to keep track of 
// whether the current row is odd or even
var even = false;

// if arguments are provided to specify the colours
// of the even & odd rows, then use the them;
// otherwise use the following defaults:
var evenColor = arguments[1] ? arguments[1] : "#FFFFFF";
var oddColor = arguments[2] ? arguments[2] : "#C0C0C0";

// obtain a reference to the desired table
// if no such table exists, abort
var table = document.getElementById(id);
if (! table) { return; }

// by definition, tables can have more than one tbody
// element, so we'll have to get the list of child
// <tbody>s 
var tbodies = table.getElementsByTagName("tbody");

// and iterate through them...
for (var h = 0; h < tbodies.length; h++) {
	// find all the <tr> elements... 
	var trs = tbodies[h].getElementsByTagName("tr");
	// ... and iterate through them
	for (var i = 0; i < trs.length; i++) {
		// avoid rows that have a class attribute
		// or backgroundColor style
		if (! ldAtribute(trs[i]) && ! trs[i].style.backgroundColor) {
			// get all the cells in this row...
			var tds = trs[i].getElementsByTagName("td");
			// and iterate through them...
			for (var j = 0; j < tds.length; j++) {
				var mytd = tds[j];
				// avoid cells that have a class attribute
				// or backgroundColor style
				if (! ldAtribute(mytd) && ! mytd.style.backgroundColor) {
					mytd.style.backgroundColor = even ? evenColor : oddColor;
					}
				}
			}
		// flip from odd to even, or vice-versa
		even =! even;
		}
	}
}

Copier ceci à l'intérieur l'étiquette <BODY>.

Copy this inside the <BODY> tag.

Sélectionner tout et copier dans le Presse-papier (IE)

Select all and copy in the Clipboard (IE)

<body onLoad="ldAlternate('Alternate', '#FFFFFF', '#C0C0C0');">

Copier ceci dans la section <BODY> à l'endroit désiré dans la page.

Copy this in the <BODY> section at the desired location in the page.

Sélectionner tout et copier dans le Presse-papier (IE)

Select all and copy in the Clipboard (IE)

<script>
Header = new Array();
Header[0] = ["Nbr","#"];
Header[1] = ["Dte","Date"];
Header[2] = ["Nbr","N°"];
Header[3] = ["Txt","Description"];
Header[4] = ["Amt","$"];

Line = new Array();
Line[0] = ["1","2005/01/04","3","Sears Canada","99.10"];
Line[1] = ["2","2004/12/27","7","Bell Canada","50.03"];
Line[2] = ["3","2005/01/03","1","Vidéotron","185.68"];
Line[3] = ["4","2004/12/31","33","Future Shop","422.05"];
Line[4] = ["5","2005/01/09","22","Reader's Digest","31.95"];

ldTable();
</script>