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

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

3 个答案: