Bonjour tous monde,
Ce que je fais
Voilà je dois pour l'un de mes projets réaliser la possiblité de faire une facture à l'aide du language JavaScript et de requêtes AJAX.
Cependant, je rencontre un petit problème, j'ai comme consigne d'avoir la possibilité de rajouter des lignes à mon tableau, chose que je fais avec une de mes méthodes, en utilisant insertRow(-1) et ensuite insertCell(...). Voici mon code ( je m'excuse d'avance pour la présentation du code, il s'agit de mon premier post tout forum confondu où je présente du code) :
</div>
<div class="tableau" id="facture">
<table>
<thead>
<tr class="entete_tableau">
<th>Code prestation</th>
<th>Désignation</th>
<th>Prix</th>
<th>Quantité</th>
<th>Montant</th>
</tr>
</thead>
<tbody id="tabBody">
<tr id="productRow">
<td id="productCode"></td>
<td id="productSelect">
<select id="products" >
<option value="">Vide</option>
</select></td>
<td id="price"></td>
<td id="amount"><input type="text" name="price" onchange="sumCalculation(this)"/> </td>
<td id="sum"></td>
<span id="reductionColor"></span>
</tr>
</tbody>
<tfoot>
<tr id="trSum">
<td class="invisible"></td>
<td class="invisible"></td>
<td class="invisible"></td>
<td class="titleTotale">Somme</td>
<td id="totalSum"></td>
</tr>
<tr id="trReduction">
<td class="invisible"></td>
<td class="invisible"><span id="colorReduction"></span></td>
<td class="invisible"></td>
<td > Remise</td>
<td><span id =reduction></span> </td>
</tr>
<tr id="trRealTotal">
<td class="invisible"></td>
<td class="invisible"></td>
<td class="invisible"></td>
<td > A régler</td>
<td id="realTotal"></td>
</tr>
</tr>
</tfoot>
</table>
</div>
JS ( Les méthodes utilisés)
function showProduits(){ /*Utilisé lors du onload() du <body></body> */
xmlhttp = new XMLHttpRequest()
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var products = xmlhttp.responseText.split(";");
for (var i = 1; i < products.length - 1; i++) {
document.getElementById("products").innerHTML += '<option value="' + i + '" onclick="getProductDetails(' + i + ')" >' + products[i - 1] + '</option>';
}
}
}
xmlhttp.open("GET" , "getProductDetails.php",true);
xmlhttp.send();
}
function addRows() {
var tab = document.getElementById("tabBody");
var row = tab.insertRow(-1);
var rowsNumber = tab.rows.length;
cell = row.insertCell(0);
cell.innerHTML += "";
cell = row.insertCell(1);
cell.innerHTML += /*Code pour la liste déroulante */
cell = row.insertCell(2);
cell.innerHTML += "";
cell = row.insertCell(3);
cell.innerHTML += '<input id= "price'+rowsNumber+'"> </input>';
cell = row.insertCell(4);
cell.innerHTML += "";
}
Ce que je veux
J'aurais donc voulu savoir dans un premier temps comment pourrais-je récuperer ces données au moment ou j'ajoute une ligne. Et dans une deuxième temps si il était poible de définir des "Id" différents pour chaque 'td' crée grâce à insertCell. ( Par exemple pour ma première ligne de tableau id="price" ensuite pour la deuxième id="price2" ect..., pour avoir la possibilité de récuperer les données de chaque ligne et de chaque cellule grâce à un boucle.
Ce que j'obtiens
Petit soucis, dans l'une des cellules je dois afficher une liste déroulante avec les prestations disponible, ces prestations sont récupérer grâce à une requête SQL, prestations que je n'arrive à faire afficher que pour la première ligne du tableau mais pas pour les suivantes.
<a href="http://www.hostingpics.net/viewer.php?id=684798Capturedcran20170325161115.png"><img src="http://img4.hostingpics.net/thumbs/mini_684798Capturedcran20170325161115.png" alt="Heberger image" /></a>
Merci d'avance