通過 JavaScript 設置 HTML 元素的 CSS 寬度

Question

我正在嘗試為 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);

我生成了兩個“div”，您在第三張圖像中看到的灰色的是“.progress-bar”，另一個用綠色填充的是“.filled-progress-bar”。 然后我嘗試將“.filled-progress-bar”的寬度設置為：

// Iterate each sorted rows and add the correct amount of fill
// Get the lowest and highest value of the sorted row
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;

    currentTdElement.style.width = "percentageOfMaxValue%";
});

我想突出顯示最后一行，我使用 .style.width 命令：

currentTdElement.style.width = "percentageOfMaxValue%";

如果我手動將其插入到 my.css 文件中，則此方法有效，但通過上面的 JavaScript 文件生成時，它似乎不起作用。 你們中的一些人有沒有機會看到我的 go 哪里錯了？ 非常感謝您的參與！

Answer 1

我通過一些試驗和錯誤以某種方式自己修復了它。 我將表中“td”元素的 innerHTML 內容更改為：

    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 + "%";


});

我認為我的問題部分是在我的原始代碼中，我無法訪問“.filled.progress.bar”，因為它嵌套在“.progress.bar”class 中，並且我的語法沒有正確提取這個 div 元素。 其次，“percentageOfMaxValue”的格式不正確，但上面的解決方案似乎已經修復了它。