Comment affecter dynamiquement des données au tableau <td> en utilisant javascript pour plusieurs lignes?

Je suis coincé avec l'énoncé du problème mentionné dans le titre. J'ai un scénario où je reçois des données séparées par des virgules sur un clic de bouton et je veux attribuer ces données aux td éléments du tableau en utilisant javascript.Comment affecter dynamiquement des données au tableau <td> en utilisant javascript pour plusieurs lignes?

S'il vous plaît consulter le code ci-dessous:

// Consider we have data in comma split format in x array. 
// For ex: the data in x array is {1,2,3}{4,5,6}{7,8,9} i.e. 3rows 
// Now I want to assign that to td1, td2 and td3 of the table 
// In function I'm looping the data as below where I'm directly assigning 
// the data to the td1,td2,td3 id of the table. 

for (i = 0; i < x.length; i++) { 
    // alert(x[i]); 
    document.getElementById('td1').innerHTML = x[i++]; 
    document.getElementById('td2').innerHTML = x[i++]; 
    document.getElementById('td3').innerHTML = x[i++]; 
}

Le problème est quand je insérer les données, la nouvelle ligne ne se crée. Au lieu de cela, la nouvelle ligne remplace les anciennes données de ligne. Le code HTML pour la table est comme ci-dessous.

<html> 
<body> 
    <table class='tbl-qa'> 
     <thead> 
      <tr> 
       <th class='table-header' width='20%'>Title</th> 
       <th class='table-header' width='40%'>Description</th> 
       <th class='table-header' width='20%'>Date</th> 
      </tr> 
     </thead> 
     <tbody id='table-body'> 
      <tr class='table-row' id = 'table-row'> 
       <td id = 'td1'>''</td> 
       <td id = 'td2'>''</td> 
       <td id = 'td3'>''</td> 
      </tr> 
     </tbody> 
    </table> 
</body> 
</html>

Quelqu'un peut-il m'aider à résoudre le problème? Note - Je veux assigner obligatoirement les données au td de la div div.

Source

2017-10-16 Santosh Gadhave

Vous n'avez ici que 3 éléments td. Voulez-vous avoir 9 au total? Avec un divisant les 3 prochaines? – IsThisJavascript

Vos données n'ont pas de sens pour moi, ce n'est pas valide. Je viens de le mettre à 3 cordes pour l'instant et vous pouvez me faire savoir si ce n'est pas acceptable. Voici comment vous pouvez définir dynamiquement les éléments <td> à une ligne

var data = ["1,2,3","4,5,6","7,8,9"]; 
 
for (i=0; i < data.length; i++){ 
 
    var td = document.createElement('td'); // create a td node 
 
    td.innerHTML = data[i]; // fill the td now with a piece of the data array 
 
    document.getElementById("table-row").appendChild(td); // append the td element to the row 
 
}

<table class='tbl-qa'> 
 
    <thead> 
 
    <tr> 
 
     <th class='table-header' width='20%'>Title</th> 
 
     <th class='table-header' width='40%'>Description</th> 
 
     <th class='table-header' width='20%'>Date</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody id='table-body'> 
 
    <tr class='table-row' id = 'table-row'></tr> 
 
    </tbody> 
 
</table>

Source

2017-10-16 15:25:46

Votre nouvelle ligne remplacera toujours votre ancienne ligne avec votre configuration actuelle. C'est parce que vous faites référence à "td1", "td2" et "td3" qui, comme il se doit, n'apparaissent qu'une seule fois dans votre script. Vous avez besoin d'ID dynamiques pour que cela fonctionne.

Vous pouvez le faire en PHP par exemple, avec: (cet exemple ne comprend pas une fonction d'échappement, qui est nécessaire pour des raisons de sécurité)

$query = "SELECT * FROM example"; 
$get_example_query = mysqli_query($connection, $query); 
while($row = mysqli_fetch_assoc($get_example_query)){ 
$id = $row['id'] 
$content = $row['content']; 
echo "<tr>"; 
echo "<td id="$id">$content</td>"; 
echo "</tr>; 
}

Source

2017-10-16 15:26:51 cmprogram

Si vous utilisez mysqli, vous ne devriez pas utiliser une fonction d'échappement, vous devriez préparer vos déclarations. – IsThisJavascript

Pas pertinent à cette réponse car j'ai spécifiquement dit qu'il n'est pas inclus. – cmprogram

Je vous fais juste savoir pour votre propre sécurité. fonction d'échappement! = préparation – IsThisJavascript

Je suppose que vos données se présente comme suit:

[{ 
    title: 'Title', 
    description: 'Description', 
    date: 'Date' 
}, { 
    // ... 
}]

Vous pouvez créer dynamiquement votre élément <td> sans avoir à les ajouter au code HTML. La création se fera dans la boucle de vos données.

let data = [{ 
 
    title: 'T1', 
 
    description: 'D1', 
 
    date: 'DT1' 
 
}, { 
 
    title: 'T2', 
 
    description: 'D2', 
 
    date: 'DT2' 
 
}, { 
 
    title: 'T3', 
 
    description: 'D3', 
 
    date: 'DT3' 
 
}]; 
 
let tbody = document.getElementById('table-body'); 
 
let tr, td; 
 

 
data.forEach((element) => { 
 
    tr = document.createElement('tr'); 
 
    for (let key in element) { 
 
     if (element.hasOwnProperty(key)) { 
 
      td = document.createElement('td'); 
 
      td.innerHTML = element[key]; 
 
      tr.appendChild(td); 
 
     } 
 
    } 
 
    tbody.appendChild(tr); 
 
});

<html> 
 
<body> 
 
    <table class="tbl-qa"> 
 
     <thead> 
 
      <tr> 
 
       <th class="table-header" width="20%">Title</th> 
 
       <th class="table-header" width="40%">Description</th> 
 
       <th class="table-header" width="20%">Date</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody id="table-body"></tbody> 
 
    </table> 
 
</body> 
 
</html>

Hope this helps.

Source

2017-10-16 15:38:46

Comment affecter dynamiquement des données au tableau <td> en utilisant javascript pour plusieurs lignes?

Répondre

Questions connexes