Je souhaiterais modifier la valeur de l'attribut class sur une balise TD avec Netscape 4.7
Voici mon code qui permet de definir un evenement onclick pour chaque cellule du tableau. Au
declenchement du OnClick(à l'endroit du alert dans le code ci dessous) je voudrais modifier la
valeur de l'attribut class de la balise TD qui est initialement à "cssLigne" et lui affecter "cssSurligne".
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="Files\Test32.css">
<STYLE TYPE="text/css">
.cssLigne {
color: Black;
background-color:red;
font-size: 10pt;
font-family:verdana, arial;
}
.cssSurligne {
color: White;
background-color:green;
font-size: 10pt;
font-family:verdana, arial;
}
</STYLE>
<SCRIPT>
//créer les layers: cell.ol pour chaque cellule
function initTableLayers (tableName, rows, cols) {
if (document.layers) {
var maxHeight = new Array (rows);
var minTop = new Array (rows);
var maxWidth = new Array (cols);
var minLeft = new Array (cols);
for (var r = 0; r < rows; r++) {
maxHeight[r] = 0;minTop[r] = 2000;
}
for (var c = 0; c < cols; c++) {
maxWidth[c] = 0;minLeft[c] = 2000;
}
for (var r = 0; r < rows; r++)
for (var c = 0; c < cols; c++) {
var cell = document[tableName + 'c' + c + 'r' + r];
if (maxHeight[r] < cell.clip.height)
maxHeight[r] = cell.clip.height;
if (minTop[r] > cell.pageY)
minTop[r] = cell.pageY;
}
for (var c = 0; c < cols; c++)
for (var r = 0; r < rows; r++) {
var cell = document[tableName + 'c' + c + 'r' + r];
if (maxWidth[c] < cell.clip.width)
maxWidth[c] = cell.clip.width;
if (minLeft[c] > cell.pageX)
minLeft[c] = cell.pageX;
}
for (var r = 0; r < rows; r++) {
for (var c = 0; c < cols; c++) {
var cell = document[tableName + 'c' + c + 'r' + r];
cell.clip.width = maxWidth[c];
cell.clip.height = maxHeight[r];
cell.rowIndex = r; cell.colIndex = c;
cell.tableName = tableName;
cell.cols = cols;
var ol = cell.ol = new Layer(maxWidth[c]);
ol.cell = cell;
ol.clip.height = maxHeight[r];
ol.left = minLeft[c];
ol.top = minTop[r];
ol.width = maxWidth[c];
ol.visibility = 'show';
ol.NumLigne = r;
}
}
}
}
//a chaque cellule on affecte un handler sur le onclick
function initTableEventHandler (tableName, rows, cols, event, handler) {
if (document.layers) {
var cell0_0 = document[tableName + 'c0r1'];
initTableLayers (tableName, rows, cols);
for (var r = 0; r < rows; r++)
for (var c = 0; c < cols; c++) {
var cell = document[tableName + 'c' + c + 'r' + r];
if ((event.toLowerCase() == 'click') && (r > 0))
cell.ol.captureEvents(Event.CLICK);
cell.ol['on' + event.toLowerCase()] = handler;
}
}
}
//on definit que faire sur le onclick. this correspond au layer qui a declenché
function trClick (evt) {
//alert("Click sur r" + this.cell.rowIndex + "c" + this.cell.colIndex);
var cell = document["G0c1r1"];
alert(cell.className);
}
//au chargement de la page
function init () {
initTableEventHandler ('G0', 3, 3, 'click', trClick);
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="init()" ONRESIZE="init()"><form action="/" method="POST">
<TABLE name="G0" border="1" cellpadding="0" cellspacing="0" RULES="none" FRAME="void">
<THEAD>
<TR>
<TD ID="G0c0r0" style="position: relative;">
</TD>
<TD ID="G0c1r0" style="position:relative;">
prenom
</TD>
<TD ID="G0c2r0" style="position: relative;">
nom
</TD>
</TR>
<TBODY>
<TR>
<TD style="position:relative" id="G0c0r1" class="cssLigne">
ligne1 </TD>
<TD style="position:relative" id="G0c1r1" class="cssLigne">
Patrice</TD>
<TD style="position:relative" id="G0c2r1" class="cssLigne">
DUPONT</TD>
</TR>
<TR>
<TD style="position:relative" id="G0c0r2" class="cssLigne">
ligne2</TD>
<TD style="position:relative" id="G0c1r2" class="cssLigne">
Paul</TD>
<TD style="position:relative" id="G0c2r2" class="cssLigne">
DURAND</TD>
</TR>
</TBODY>
</TABLE>
</form>
</BODY>
</HTML>