Bonjour,
J'aurais besoin de l'aide de développeur en javascript.
J'ai créé un tableau en HTML contenant X lignes et Y colonnes.
Chaque cellule contient un lien.
Je désire que l'utilisateur puisse cliquer sur une zone vide de la cellule ou sur le lien, d'où l'utilisation du style 'display:block' pour chaque lien.
je veux ensuite que quand l'utilisateur clique sur une cellule, une fonction javascript se déclenche et fait diverses actions dont changer le style de cette cellule.
Avec une fonction javascript que je vais vous fournir, tout fonctionne si je retire le style 'display:block' de mes liens ... mais j'en ai besoin.
je pense qu'il faudrait pouvoir déterminer en javascript "l'identité" de la cellule qui contient mon lien...
Pourriez vous m'indiquer une solution ?
merci !
Voici mon code :
<HTML>
<HEAD>
<style type="text/css">
.dosel table { border:0px; width:450px; }
.dosel td { text-align: center; width:140 }
.dosel td.sel { background-color: #F0F0FF; cursor:pointer; }
.dosel td.nosel { background-color: #F8F8F8; }
.dosel tfoot { font-style: italic; font-size: 12px; font-color: #ccc; }
.dosel a { display:block; text-decoration: none; }
</style>
<script type="text/javascript">
function change_style(event)
{
var dosel=document.getElementById("dosel");
event = event || window.event;
var nCell = event.target || event.srcElement;
var colid = nCell.cellIndex;
var rowid = nCell.parentNode;
while(rowid.tagName!='TR') rowid = rowid.parentNode;
rowid = rowid.rowIndex ;
if (dosel.rows[rowid].cells[colid].className == "nosel")
{
dosel.rows[rowid].cells[colid].className="sel";
}
else
{
dosel.rows[rowid].cells[colid].className="nosel";
}
//Puis je ferais d'autres actions ici
}
function init()
{
document.getElementById("dosel").onclick = change_style;
}
window.onload = init;
</script>
</HEAD>
<body>
<div class="dosel">
<table cellspacing="4" id="dosel">
<tr>
<td class="nosel">
<a href="#">Stressé</a>
</td>
<td class="nosel">
<a href="#">Timide</a>
</td>
<td class="sel">
<a href="#">Bavard</a>
</td>
</tr>
<tr>
<td class="nosel">
<a href="#">Amical</a>
</td>
<td class="sel">
<a href="#">Gentil</a>
</td>
<td class="nosel">
<a href="#">Disponible</a>
</td>
</tr>
<tfoot>
<tr>
<td colspan=3>
Vous pouvez sélectionner un ou plusieurs mots.</br>Vous pouvez aussi déselectionner un mot.</br>Vous ne pouvez pas déselectionner un mot pour lequel vous avez déjà voté
</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>