Lorsque j'identifie le
for(let i=0; i < studentList.length-1; i++) {
row = table.insertRow(-1);
var
cell = row.insertCell(-1); cell.innerHTML = studentList[i];
cell = row.insertCell(-1); cell.innerHTML = grade
cell = row.insertCell(-1); cell.innerHTML = maxGrade;
cell = row.insertCell(-1); cell.innerHTML = student.name;
if(student.grade < maxGrade) { // change later to within 90%
cell = row.insertCell(-1); cell.innerHTML = '<button onclick="calculateGrade();" > + </button>';
}else{
cell = row.insertCell(-1); cell.innerHTML = 'Pass';
}
}
3 Réponses :
Check here the new add button is working when I am adding cell.innerHTML there will calc button and when you will click it will show "Hi am working action," I think it will help you
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p>Click the button to insert new cell(s) at the beginning of the table row.</p>
<table>
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
</tr>
<tr id="myRow">
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
</tr>
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
</tr>
</table><br>
<button onclick="myFunction()">Try it</button>
</body>
</html>
Si vous lisez mon message, la table est construite de manière dynamique non via HTML. J'ai des maladies de données, que je ne serai pas manuellement mis en HTML. Vous avez l'exemple fonctionne bien, mais pas pour moi la table est créée de manière dynamique par JavaScript. Comme chaque cellule est peuplée, un critère est vérifié - et s'il est rempli, produira un bouton dans la cellule suivante.
Si vous ajoutez une cellule de Tableau de table dynamique, vous pouvez accepter également une condition d'utilisation pour l'affichage des boutons et cela fonctionnera également. Pouvez-vous m'envoyer votre fonction de génération de table?
hmmm je vois comment vous pouvez travailler. Votre faire une affectation statique. Et s'il y a 3 cellules dans la table qui se pose. La made ma fonction les calculerait tous immédiatement. Pourrait être utile. Pas tout à fait là. Mais je vais bricoler avec ce code. concept intéressant
Si vous souhaitez manipuler le DOM "une tension de temps", vous devez utiliser un cadre comme JQuery ou les fonctions de JavaScript pour la manipulation DOM au lieu de innerhtml.
Pourquoi?
HTML a changé de temps en temps et vous ne pouvez pas savoir si votre innerhtml sera correct (formaté) à l'avenir.
Il existe également la possibilité que les fonctions de manipulation DOM seront plus optimisées par des compilateurs et des moteurs à l'avenir. P> auditeurs dynamiques strong> p> Si vous créez des éléments DOM Dynamicly, vous n'avez pas à déclarer les auditeurs comme texte. P> document.createeelement code> Comme exemple fonctionnera dans chaque navigateur. P> let button = document.createElement('button');
button.addEventListener('onclick', calculateGrade);
cell.appendChild(button);
Vous êtes correct et, dans le passé, c'est comme ça que je l'ai fait, mais c'était pour les petites tables de 5 à 10 rangées, cependant, la création manuelle d'une table (via HTML) pourrait être redondante. J'ai donc fait une boucle dans JS pour créer la table et vérifier uniquement certaines valeurs pour "créer" le bouton. Ou suggérez-vous de continuer à faire la table via HTML, de masquant les boutons et d'appeler le visible si nécessaire? (J'ai légèrement exagéré, c'est plus comme 20 à 30 rangées, certaines classes sont un peu plus grandes mais pas beaucoup)
Si vous ajoutez les cellules avant de l'ajouter à la DOM, vous déclenchez une seule fois une seule fois (meilleure pratique). Mais si votre table est toujours attachée à la DOM (E.G. Corps), vous devez vous cacher (CSS: Affichage: Aucun) Il a précédé de le manipuler (ajouter des lignes, des cellules, des boutons, ...). Après avoir terminé votre manipulation, rendez-le visible à nouveau (CSS: Affichage: Initial). Donc, vous ne faites que déclencher le reflofing uniquement sur la rendant invisible et la rendant à nouveau visible (= deux fois) au lieu de déclencher l'anreflow sur une très manipulation. Vérifiez également << a href = "https://developers.google.com/speed/docs/insights/browser-reflow" rel = "Nofollow NOREFERRER"> développeurs.google.com/speed/docs/insights/Browser-Reflow >
Je marquage le vôtre de mieux (tout le monde a eu de bonnes réponses) mais le vôtre m'a fait comprendre que je recevais un problème de refusion (activé sur la console et l'a vu) puis retourné et relisez votre réponse. changé le code un peu. Semble fonctionner. Il semble avoir été une question et un ordre dom - comme vous l'avez dit. C'est là où se bloquer commencé. J'ai depuis refuge une partie du code - merci pour votre suggestion!
N'utilisez pas d'attributs onevent:
Utilisez soit une propriété onevent: p> ou un événement d'événements: p> Utilisez Choisissez un élément qui est un ancêtre commun à tous les éléments que nous souhaitons réagir à un événement. Cela inclut la fenêtre la fonction de rappel (ex. Référenciez l'élément cliqué, planifié, plané, etc. avec la propriété d'événement isoler Le reste du code est juste de générer de manière dynamique une table à des fins de démonstration. Bien que le code qui génère une table dans la question de OP est douteux, cela ne faisait pas partie de la question, il n'y a donc aucune explication de cette partie de la démo. p> p> onclick = "FUNC ()" del> > ... code> code> P> document.QuerySelector ("bouton"). Onclick = Fonction; Code> P> document.QuerySelector ("bouton"). AddeventListener ("Cliquez sur", Fonction) CODE> P>
code> et de document code> aussi, mais fenêtre code> doit être utilisé pour des événements clés (ex. document.onclick = calculatgrade code>) p> li>
CalculatGrade (E) code>) doit passer l'objet d'événement ( événement code>, evt code> ou E code> sont les noms les plus courants). p> li>
event.target code> (ex. const TGT = e.target code>). li>
event.target code> par si ... sinon code> instructions de contrôle (ex. si (TGT.MATCHES ("bouton")) { ... code>) p> li>
ol>
:root {
font: 400 5vh/1 Verdana;
}
table {
table-layout: fixed;
border-collapse: collapse;
width: 96%;
}
caption {
font-weight: 700;
font-size: 1.2rem;
}
th,
td {
border: 2px ridge #000;
min-height: 30px;
}
th:first-of-type {
width: 10%;
}
th:nth-of-type(3) {
width: 20%;
}
th:last-of-type {
width: 25%
}
td:first-of-type,
td:nth-of-type(3) {
text-align: center;
font-size: 1.2rem;
font-family: Consolas;
}
td:nth-of-type(3)::after {
content: '%';
}
td:first-of-type.note {
text-align: right;
font-size: 0.85rem;
font-family: Verdana;
border: none
}
button {
font: inherit;
width: 100%
}
Assurez-vous: Avez-vous assuré que
CalculatGrade est ou n'est pas appelé avec dire, aconsole.log instruction dans cette fonction?Oui
console.log ('Ici, je suis'); ne vous y arrivent pas :-) (Je fais cela dans beaucoup de mon code pour un point de contrôle)Le code actuel a l'air bien. Ajouter plus de code qui peut aider à reproduire le problème.
Avez-vous accès au script qui génère les cellules de la table et met le bouton là-bas?
posté modifier 2. Modifier 1 a la fonction, mais le code ne reçoit jamais sur le journal de la console