HTML "onclick" événement en JavaScript (dans une table)

J'essaie de convertir une table que j'ai écrite en HTML vers Javascript parce que je veux que la table soit générée dynamiquement (nombre de lignes). Le principal problème que j'ai, c'est que les cellules individuelles de la table sont cliquables et ouvrent une autre page html. Malheureusement, le paramètre html "onclick" ne fonctionne pas avec document.write instructions document.write Voici un exemple d'une cellule de table en HTML:

 <td id="r1c1" align="center" onclick="getTicket(1,'plan',1);"><script language="JavaScript">document.write(getDate(1,"plan", "r1c1")); </script></td>

Les fonctions de cette ligne sont prédéfinies et fonctionnent donc je ne publierai pas celles-ci, mais l'idée est que la fonction getTicket (…) supposerait ouvrir une autre page html.

Mes problèmes sont la façon d'obtenir l'onclick pour fonctionner en JavaScript. Je peux créer les cellules en version JavaScript en utilisant les commandes document.write, mais je ne sais pas vraiment comment rendre ces cellules cliquables pour exécuter la fonction getTicket (…) .

Votre style de programmation Javascript est ancien , pour le moins. document.write est une fonction développée principalement quand il n'y avait pratiquement aucune méthode commune pour générer du contenu dynamique.

Donc, vous devez générer vos éléments dynamiquement avec des méthodes comme document.createElement , y ajouter votre contenu, puis attacher les éléments au DOM avec des méthodes modernes comme appendChild .

Ensuite, vous pouvez attacher des auditeurs d'événements en utilisant quelque chose de plus moderne que la manière traditionnelle comme onclick , comme addEventListener . Voici un extrait:

 var td = document.createElement("td"); td.innerHTML = getDate(1, "plan", "r1c1"); td.addEventListener("click", function() { getTicket(1, 'plan', 1); }); row.appendChild(td);

Je suppose que cette row est la ligne de la table que vous générez.

Malheureusement, IE <9 utilise une méthode différente appelée attachEvent , de sorte qu'il devienne:

 td.attachEvent("onclick", function() { ...

Vous pouvez modifier les attributs en HTML à l'aide de la fonction setAttribute (Attribut, Valeur) .

Avec cette fonction, vous pouvez générer le code de la cellule et définir dynamiquement l'attribut.

Vous ne devez pas utiliser document.write pour ajouter des éléments à votre page, il existe des fonctions javascript pour ceci:

 var myCell = document.createElement('td'); myCell.setAttribute('id', 'r1c1'); myCell.setAttribute('align', 'center'); myCell.onclick = function () { getTicket(1, 'plan', 1); }; // myRow is the 'tr' you want this 'td' to be a child of. myRow.appendChild(myCell);

Voir en action: http://jsfiddle.net/teH7X/1/

Pouvez-vous essayer ci-dessous le code, si cela fonctionne, puis faites-moi savoir que je vais vous donner une meilleure option:

 <script> document.onload = function() { document.getElementById('r1c1').onclick = function() { getTicket(1,'plan',1); } } </script>

Vérifiez et faites-le moi savoir.