Get width of the dynamic table TD

Question

I am looking for some help on getting the width of a dynamic table TD, if it is created as a string.

For example, this method creates a table to display weather forecast data. To keep the table look and feel consistent, I need to know the size of the TD, so I can calculate how much text can be entered, keeping the size the same for each city, forecast, and temperature.

function populateForecast() {
   var output = "";
   output += "<table width=\"100%\" height=\"100%\" border=\"0\" id=\"tblResults\">";
   // loop over the weather data here.
   output += "<tr><td class=\"city-size\"><p class=\"city-font\">";
   output += "New York, NY";  // This would be a variable from the weather API
   output += "</p></td>";
   output += "<td class=\"forecast-size\"><p class=\"forecast-font\">";
   output += "Partly Cloudy"  // This would be a variable from the weather API
   output += "</p></td>";
   output += "<td class=\"temp-size\"><p class=\"temp-font\">";
   output += "71/62";  // This would be a variable from the weather API
   output += "</p></td>";
   output += "</tr>";
   output += "</table>";

   document.getElementById('weatherDiv').innerHTML = output;
  }

Since this is a string, it returns null when trying to getElement... of the table elements. I tried to get the size of the table td using jquery after, but returned null as well.

    $(document).ready(function () {
      $('table td').each(function(){         
        console.log("Have a TD");
      });
    });

I also tried to create the table using javascript, so it is not created with a string. The issue here is adding the table to the div. The only way I could get it to add was to use appendChild, but every update, it generates a new table, and I am still unable to get the width.

 var table = document.createElement('table'); table.setAttribute("id", "weatherTable") //for (var i = 1; i < x; i++){ for each forecast. var tr = document.createElement('tr'); var td1 = document.createElement('td'); var td2 = document.createElement('td'); td2.setAttribute("id", "forecastTable") var td3 = document.createElement('td'); var cityText = document.createTextNode('New York, NY'); var forecastText = document.createTextNode('Partly Cloudy'); var tempText = document.createTextNode('71/62'); td1.appendChild(cityText); td2.appendChild(forecastText); td3.appendChild(tempText); tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); table.appendChild(tr); //} document.getElementById('weatherDiv').appendChild(table); var width = document.getElementById('forecastTable').offsetWidth; console.log(width);

 <div id="weatherDiv"></div>

// can't append, it adds not updates the table.

Using the javascript table, when adding it to the div, addendChild works, but that appends a new table every 60 second update, instead of updating. Additionally, trying to get the width on the object was returning null as well. Uncaught TypeError: Cannot read property 'offsetWidth' of null. I am sorry, but every attempt at getting the TD is returning null, and I am struggling to find a way.

How can I get the current TD pixel width of the table, even after it is resized, from either approach?

Answer 1

append child should be like this

 document.getElementById('weatherDiv').appendChild(table);

a small demo

 var table = document.createElement("table") for(var i = 1; i<= 5; i ++){ var tr = document.createElement("tr"); var td = document.createElement("td") td.innerText = "<span>Text = " + i + "</span>" tr.appendChild(td) table.appendChild(tr) } document.getElementById("container").appendChild(table)

 <div id="container"> </div>