设置HTML的CSS宽度<；td>；元素通过JavaScript访问

我试图为HTML表中的每个“td”元素创建一个进度条。表本身是通过JavaScript生成的，当前带有随机占位符值。我希望每个进度条显示它与随机生成的最高值的相对百分比。请参见下图：

目前我所做的是：

// GAMES PLAYED
const games = Math.floor(Math.random() * 100);
const td2 = document.createElement("td");
td2.textContent = games;
td2.innerHTML = games + '<div class="progress-bar"><div class="filled-progress-bar"></div>'
tr.appendChild(td2);

我想突出显示最后一行，在那里我使用.style.width命令：

currentTdElement.style.width=“percentageOfMaxValue%”

---

如果我手动将其插入到.css文件中，这是可行的，但通过上面的JavaScript文件生成时，它似乎不起作用。有没有可能你们中的一些人能看出我错在哪里？非常感谢您抽出时间

我自己用一些尝试和错误来修复它。我将表中“td”元素的innerHTML内容更改为：

    td2.innerHTML = games + '<div class="progress-bar"></div><div class="filled-progress-bar"></div>';

---

我认为我的问题部分在于，在我的原始代码中，我无法访问“.filled.progress.bar”，因为它嵌套在“.progress.bar”类中，并且我的语法没有正确提取这个div元素。其次，“percentageOfMaxValue”的格式设置不正确，但上面的解决方案似乎已经解决了这个问题。

您是否尝试过不将整个值用这样的引号括起来<代码>currentTdElement.style.width=MaxValue的百分比+“%”进度元素如何？然后，您可以使用JS或数据设置值，而不是创建自定义控件：我有是的，但当我这样做时，整个“td”元素将其最大宽度更改为一个奇怪的大小，如下所示：但我不能否认这可能是由于我对css/javascript缺乏经验造成的问题（这是我的第一个网页）…我将试用进度元素，看看效果如何，谢谢！

    td2.innerHTML = games + '<div class="progress-bar"></div><div class="filled-progress-bar"></div>';

   const progressBarFirstValue = sortedRows[0].cells[column].textContent;
const progressBarSecondValue = sortedRows[sortedRows.length - 1].cells[column].textContent;

const progressBarMaxValue = (progressBarFirstValue > progressBarSecondValue) ? progressBarFirstValue : progressBarSecondValue;

sortedRows.forEach(function (row) {
    const currentTdElement = row.cells[column];
    tdValue = currentTdElement.textContent;
    percentageOfMaxValue = tdValue / progressBarMaxValue * 100;

    stringValue = percentageOfMaxValue.toString();
    
    currentTdElement.childNodes[2].style.width = stringValue + "%";


});