获取动态表格宽度 TD

如何解决获取动态表格宽度 TD

我正在寻找有关获取动态表 TD 宽度的帮助（如果它是作为字符串创建的）。

例如，此方法创建一个表格来显示天气预报数据。为了保持表格的外观和感觉一致，我需要知道 TD 的大小，以便我可以计算可以输入多少文本，保持每个城市、预报和温度的大小相同。

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

由于这是一个字符串，因此在尝试获取表元素的 getElement... 时返回 null。之后我尝试使用 jquery 获取表 td 的大小，但也返回了 null。

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

我也尝试使用 javascript 创建表，所以它不是用字符串创建的。 这里的问题是将表添加到 div。我可以让它添加的唯一方法 本来是用appendChild的，但是每次更新，都会生成一个新表，我还是 无法获取宽度。

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>

// 不能追加，它增加不更新表。

使用 javascript 表，当将它添加到 div 时，addendChild 工作，但每 60 秒更新附加一个新表，而不是更新。此外，尝试获取对象的宽度也会返回 null。未捕获的类型错误：无法读取 null 的属性“offsetWidth”。抱歉，每次尝试获取 TD 都返回 null，我正在努力寻找方法。

如何获得表格的当前 TD 像素宽度，即使在调整大小后，无论采用哪种方法？

解决方法

append child 应该是这样的

exchange = VideoStream(0).start()
ocr = OCR().start()
ocr.set_exchange(exchange)

 while True:  # Begins a loop for the real-time OCR display
        pressed_key = cv2.waitKey(1) & 0xFF
        if pressed_key == ord('q'):
            stop_stream_ocr(exchange,ocr)
            break

        frame = exchange.frame 

        cv2.imshow("Video Get Frame",frame)
        cps1.increment()

一个小演示

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

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)