Javascript 动态生成的td标签未显示在页面中

我在我的一个页面中有此HTML结构：

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

您的json不正确

{'age'=>'ad'}

应该是

{'age':'ad'}

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

---

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;

var乘客={'1'：{'age'：'ad'}，'2'：{'age'：'ad'}，'3'：{'age'：'ch'}，'4'：{'age'：'in'}；
var ts=“”；
var adultCount=childCount=infantCount=0；
用于（乘客中的var x）
{
乘客=乘客[x]；
ts+=''；
ts+=''；
开关（current passenger.age.toUpperCase（））
{
案例“AD”：ts+=“成人-”+++成人计数；中断；
案例'CH'：ts+='Child-'+++childCount；中断；
案例'IN'：ts+='baby-'+++婴儿计数；中断；
}
ts+=''；
ts+=''；
}
document.getElementById（“旅行者计数”）.innerHTML+=ts；

在最后一行中，您只需将数据附加到具有进一步tds的行中。

请尝试使用此代码

<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>

myStyle先生{
宽度：53px；
}
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”）；
用于（乘客中的var x）{
乘客=乘客[x]；
//创建一个空元素
var行=table.insertRow（0）；
//插入新单元格
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（1）；
//设置样式
cell1.style.width=“53px”；
//定级
cell2.className=“myStyle”；
cell2.classList.add（“其他类”）；
//为单元格添加值：
cell1.innerHTML='成人-'+++adultCount；
cell2.innerHTML='Child-'+++childCount；
cell3.innerHTML='Baby-'+++BafantCount；
}

---

无论如何，我建议您使用一个框架来完成此任务，比如或

您在控制台中是否有任何错误？您可以为其创建小提琴吗？或者在中进行更改，因为您试图将span的td设置为内部html，您必须将td附加到Travelers tdam的旁边。您无法在@AravindSivam中添加，完全没有错误。当我登录到控制台时，我会在

标记中找到

标记，但不会在

标记字段中找到。那会弄丢的，谢谢。我在问题代码中更新了这一点。然而，这不是问题，那太好了。但是，

#旅行者计数span

介于两个

标记之间，我将更新我的代码以反映我的意思。你知道我如何将你的解决方案应用到更新的代码中吗？当然，为了保持DOM的有效性，只需附加span，而不使用嵌套的

td

s，删除

ts+=''和
ts+=''我希望这是一个选项。但是这个网站需要我的问题代码中的结构。我使用了你的代码的一个修改版本，它工作了。谢谢但是，我有一个问题，如何向单元格添加
width
（甚至
style
）属性？我已更新代码，将样式和类包含到新创建的TD中
<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>