動態生成的td標簽未顯示在頁面中

Question

我的其中一個頁面中有以下HTML結構：

<table width="300">
 <tr>
  <td width="65">Travelers</td>
  <span id="traveller-count"></span>
  <td>Total</td> 
 </tr>
</table>

我正在嘗試使用JavaScript使用動態數據填充#traveller-count <span> 。 但是，（javascript）生成的<td>標記無法顯示在呈現的頁面中。 結果，數據顯示在表的外部，而不是表的內部。

我將如何解決此問題的任何想法將不勝感激。

以下是我的JavaScript代碼：

var passengers = { '1':{'age':'ad'}, '2':{'age':'ad'}, '3':{'age':'ch'}, '4':{'age':'in'} }
var ts = '';
var adultCount = childCount = infantCount = 0;

for(var x in passengers)
{
   currPassenger = passengers[x];

   ts += '<td width="52">';
   ts += '<span style="color:#fff;">';

   switch(currPassenger.age.toUpperCase())
   {
      case 'AD' : ts += 'Adult-'  + ++adultCount; break;
      case 'CH' : ts += 'Child-'  + ++childCount; break;
      case 'IN' : ts += 'Infant-' + ++infantCount; break;
   }

   ts += '</span>';
   ts += '</td>';
}

document.getElementById("traveller-count").innerHTML = ts;

Answer 1

span元素位於td之外。 我將擺脫此范圍，並將數據附加到tr innerHTML-這樣做：

<table width="300">
<tr id="traveller-count"><!-- now this tr has id "traveller-count" -->
<td width="65">Travelers</td>
</tr>

javascript：

var passengers = { '1':{'age':'ad'}, '2':{'age':'ad'}, '3':{'age':'ch'}, '4':{'age':'in'} };
var ts = '';
var adultCount = childCount = infantCount = 0;

for(var x in passengers)
{
   currPassenger = passengers[x];

   ts += '<td width="52">';
   ts += '<span style="color:#111;">';

   switch(currPassenger.age.toUpperCase())
   {
      case 'AD' : ts += 'Adult-'  + ++adultCount; break;
      case 'CH' : ts += 'Child-'  + ++childCount; break;
      case 'IN' : ts += 'Infant-' + ++infantCount; break;
   }

   ts += '</span>';
   ts += '</td>';
}

document.getElementById("traveller-count").innerHTML += ts;

在最后一行中，您只需將數據附加到進一步的tds中即可。

Answer 2

您的json不正確{'age'=>'ad'}應該為{'age':'ad'}

var passengers = { '1':{'age'=>'ad'}, '2':{'age':'ad'}, '3':{'age':'ch'}, '4':{'age':'in'} }

Answer 3

嘗試使用此代碼

<style>
    .myStyle {
        width: 53px;
    }
</style>

<table width="300" id="myTable"></table>

<script>


    var passengers = { '1': { 'age': 'ad' }, '2': { 'age': 'ad' }, '3': { 'age': 'ch' }, '4': { 'age': 'in'} }
    var ts = '';
    var adultCount = childCount = infantCount = 0;

    var table = document.getElementById("myTable");

    for (var x in passengers) {
        currPassenger = passengers[x];

        // Create an empty <tr> element 
        var row = table.insertRow(0);

        // Insert new cells 
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(1);

        // Set Style
        cell1.style.width = "53px";

        // Set class
        cell2.className = "myStyle";
        cell2.classList.add("otherClass");

        // Add value to cells:
        cell1.innerHTML = 'Adult-' + ++adultCount;
        cell2.innerHTML = 'Child-' + ++childCount;
        cell3.innerHTML = 'Infant-' + ++infantCount;
    }

</script>

無論如何，我建議您使用一個框架來執行此任務，例如AngularJS或Knockout