Table créée par code n'est pas trouvée comme noeud dans la nodeList
Bonjour à tous,
Dans le code ci-dessous qui marche parfaitement et qui crée dynamiquement une table avec un bouton supprimer pour chaque ligne, il m'est ensuite impossible de faire une délégation sur la liste des boutons car la table ne figure pas dans la nodeList du dom et aucun de ses éléments n'est donc disponible pour un queryselectorAll par exemple...
Sauriez-vous me dire pourquoi ?
Merci d'avance
listeCategoriesDepenses.js :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
| function listeCategoriesDepenses() {
//On instancie XMLHttp request
let xhr = new XMLHttpRequest()
xhr.open('get', 'listeCategoriesDepenses.php')
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
//Si réponse on la convertit
let categories = JSON.parse(xhr.response)
//console.log(categories)
//création du tableau dans la page
const tableau = document.createElement('table')
//Boucle sur l'objet categories JSON
const listeCategories = categories.map((item)=> {
//Affiche les éléments catégories en liste
return `
<tr>
<td>${item.nomcategorie}</td>
<td><button class="btnSupprimerCategorie" data-idcategorie=${item.id} type="button">Effacer</button></td>
</tr>
`
})
//console.log(listeCategories)
tableau.innerHTML = `
<thead>
<tr><th colspan=2>Catégories Dépenses</tr></th>
</thead>
<tbody>${listeCategories.join(' ')}</tbody>`
//Affichage du tableau
document.getElementById("listeCategoriesDepenses").appendChild(tableau)
} else {
//On gère les erreurs
let erreur = xhr.response
console.log("Erreur ! : " + erreur.message)
}
}
//Envoi de la requête Ajax
xhr.send()
}
listeCategoriesDepenses() |
index.php :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <?php
require_once 'ajoutcategoriedepenses.php';
require_once 'supprimercategoriedepenses.php';?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/styles.css">
<title>Document</title>
</head>
<body>
<div id="listeCategoriesDepenses">
<form action="" method="post">
<label for="nomcategorie">Nom catégorie</label>
<input type="text" name="nomcategorie" id="nomcategorie">
<input type="submit" value="Ajouter" id="btnajoutcategorie" name="btnajoutcategorie">
</form>
</div>
</body>
<script type="text/javascript" src="js/listecategoriesdepenses.js"></script>
<script type="text/javascript" src="js/supprimercategoriedepenses.js"></script>
</html> |
supprimerCategorieDepense.js
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| window.onload = () => {
const btnSupprimerCategorie = document.querySelectorAll("*")
console.log(btnSupprimerCategorie)
btnSupprimerCategorie.forEach((element)=>{
element.addEventListener('click',(e)=>{
//e.preventDefault()
})
})
// let xhr = new XMLHttpRequest();
// xhr.open("POST", "supprimercategoriedepenses.php");
// xhr.onreadystatechange=(e)=>{
// if(xhr.readyState==4 &&xhr.status==200 ){
// let reponse=xhr.response
// }
// }
} |
