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?

Test the width of the container. If you make it 100vw then it is as wide as the viewport. https://stackoverflow.com/questions/44109314/javascript-calculate-with-viewport-width-height — mplungjan, Apr 07 '21 at 20:25
I made you a snippet and fixed your issues. 1: AppendChild(table) and 2, the table does not exist in the document until you added it — mplungjan, Apr 07 '21 at 20:29
Voting to close as _Not reproducible or was caused by a typo While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers._ — mplungjan, Apr 07 '21 at 20:29
The table itself should be created as a static part of the page. Then, just reference the portions of the table where the dynamic content should go and update their `.textContent`. No creation or appending required. — Scott Marcus, Apr 07 '21 at 20:29
Thank you very much for the comments. I understand making the table static, with defined columns, it was done this way because the rows are unknown at the time of creation, and are determined by the response from the API. — Mike, Apr 08 '21 at 00:11
Thank you, appendChild can't be used because the weather data is constantly updating, and appendChild will add a new table each update. $(window).width(); does return the width of the window, but still looking for a way to get the TD width. Thanks again. — Mike, Apr 08 '21 at 00:14

Subhojit Khara · Answer 1 · 2021-04-07T20:37:56.367

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

edited Apr 07 '21 at 20:37

answered Apr 07 '21 at 20:24

Subhojit Khara

79
4

if you're creating table by document.createElement then how it can be a string? – Subhojit Khara Apr 07 '21 at 20:27
The question is in reference to the first section of code, where I am trying to get the width of a TD dynamically created in that way. The document.createElement and jquery were other methods that were tried. – Mike Apr 08 '21 at 00:08

Get width of the dynamic table TD

1 Answers1