dynamically generated td tag not showing up in page

Question

I have this HTML structure in one of my pages:

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

I am trying to populate the #traveller-count <span> with dynamic data, using javascript. However, the (javascript) generated <td> tags fail to show up in the rendered page. As a result, the data shows up outside of the table, rather than inside the table.

Any ideas on how I can resolve this issue will be really appreciated.

Below is my javascript code:

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;

Can you create fiddle for it? Or make change in http://jsfiddle.net/1bdandk9/ — ketan, Apr 20 '15 at 10:10
Because you trying to set td for span as inner html, you have to append the td next to Travelers td — Anto king, Apr 20 '15 at 10:11
@AravindSivam, no error at all. When I log to the console, I get the `` tags inside the `` tag, but not the `` tag itseld. That gets lost. — NaijaProgrammer, Apr 20 '15 at 10:13
@Max, I thought as much. I figured that could be the problem. However, I don't know a better way to do it. Any ideas? — NaijaProgrammer, Apr 20 '15 at 10:15
If you spent some time to study [AngularJs](https://angularjs.org/) you discover a new word! — Max, Apr 20 '15 at 10:29

score 2 · Answer 1 · answered Apr 20 '15 at 10:16

The span element is located outside of td. I would get rid of this span, and append the data to the tr innerHTML - do it like this:

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

in last row you just append the data to the row with further tds.

that would be nice. However, the `#traveller-count span` is in-between two `` tags, I will update my code to reflect what I mean. Any idea, how I can apply your solution to the updated code? — NaijaProgrammer, Apr 20 '15 at 10:21
sure, to keep the DOM valid, just append only spans, without nested `td`s, remove `ts += '';` and `ts += '';` — n-dru, Apr 20 '15 at 10:27
I wish that were an option. But the website requires the structure as is in my question code. — NaijaProgrammer, Apr 20 '15 at 10:37

score 0 · Answer 2 · edited Apr 20 '15 at 10:11

0

your json is incorrect {'age'=>'ad'} should be {'age':'ad'}

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

edited Apr 20 '15 at 10:11

ketan

19,129
42
60
98

answered Apr 20 '15 at 10:11

Ankita

621
2
9
25

1

thanks. I updated that in my question code. However, that is not the problem. – NaijaProgrammer Apr 20 '15 at 10:14

Max · Accepted Answer · 2015-04-20T11:23:38.417

Try with this code

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

Anyway I suggest you to use a framework for this tasks, like AngularJS or Knockout

I used a modified version of your code, and it worked. Thanks. However, I have one issue, how do I add a `width` (or even `style`) attribute to the cells? — NaijaProgrammer, Apr 20 '15 at 10:59
I have updated the code to include style and class to the new created TD — Max, Apr 20 '15 at 11:24

dynamically generated td tag not showing up in page

3 Answers3