Je dois ajouter un bouton à une table créée de manière dynamique à l'aide de la base de données en temps réel en Firebase.
J'ai essayé de le faire avec ci-dessous Code Snippet. P>
var dbRefUsers = firebase.database().ref().child('Web App').child('Users');
var appendingTo = document.getElementById("userlist");
dbRefUsers.on('child_added', gotNewChild, errData);
function gotNewChild(userSnapshot){
var user = userSnapshot.val();
var userName = user.Name;
var userEmail = user.Email;
var userPassword = user.Password;
function userAction(){
}
function createElementWithText(tag, text) {
var elm = document.createElement(tag);
elm.textContent = text;
return elm;
}
var tr = document.createElement('tr');
var td = document.createElement('td');
var button = document.createElement('button');
tr.appendChild(createElementWithText('td', userName));
tr.appendChild(createElementWithText('td', userEmail));
tr.appendChild(createElementWithText('td', userPassword));
tr.appendChild(createElementWithText('td',createElementWithText('button', button.innerHTML = 'type="button" class="abc" onclick="userAction()"')));
appendingTo.appendChild(tr);
}
function errData(error){
console.log("Error!")
console.log(error);
}
3 Réponses :
Votre fonction renvoie un tableau. Essayez d'utiliser l'opérateur de répandre comme celui-ci
tr.appendchild (... CreeEnmentwithText ('TD', Nom d'utilisateur));
ou
tr.appendchild (créatifementwithtext ('TD', nom d'utilisateur) [0]);
Il n'y a pas de question avec les 3 premiers éléments. Seul problème avec le dernier élément qui est tr.appendchild (CreeEnmentwithText ('TD', CreeEnmentwitht EXT ('INPUT', INPUT.INNERHTML = 'TYPE = "BOUTON" CLASS = "ABC"))); < / code>
<table></table>
I'Check ta réponse DUD. Aucune erreur, mais alors ma table d'annexe n'a pas été affichée.
Ok, alors vous aimez également la table elle-même de manière dynamique? Si vous ajoutez le code qui ne fonctionne pas, je vais regarder.
function createElementWithText(tag, text, attributeObj = []) {
var elm = document.createElement(tag);
if (Object.keys(attributeObj).length > 0) {
for (var key in attributeObj) {
(key == 'className')
elm.className = attributeObj[key];
(key == 'type')
elm.type = attributeObj[key];
}
}
elm.append(text);
return elm;
}
var tr = document.createElement('tr');
var td = document.createElement('td');
var attributeObj = [];
attributeObj['type'] = 'button';
attributeObj['className'] = 'abc';
attributeObj['id'] = 'test';
tr.appendChild(createElementWithText('td', userName));
tr.appendChild(createElementWithText('td', userEmail));
tr.appendChild(createElementWithText('td', userPassword));
tr.appendChild(createElementWithText('td', createElementWithText('input', 'button', attributeObj)));
appendingTo.appendChild(tr);
J'ai essayé votre suggestion DUD. Mais la sortie est [objet htmlbuttonelement]