将 bgcolor 值作为参数传递给 TD答案

【问题标题】：Passing bgcolor value as parameter to TD将 bgcolor 值作为参数传递给 TD
【发布时间】：2022-10-25 01:13:49
【问题描述】：

我正在使用以下 JavaScript 代码填充表格，如何将 bgcolor 值作为参数传递给 TD？

                let template = `
                    <tr>
                       <td bgcolor="#00FF00">${"pump"+child.val().PumpID}</td>
                       <td bgcolor="#00FF00">${child.val().StartTime}</td>
                       <td bgcolor="#00FF00">${child.val().Duration}</td>
                       <td bgcolor="#00FF00">${child.val().GalsPumped}</td>
                       <td bgcolor="#00FF00">${child.val().Cycle}</td>
                       <td bgcolor="#00FF00">${child.val().Status}</td>
                    </tr>`;
                    table.innerHTML += template;
                 })
                });

基本上我想这样做：

var  color_variable = #ff00;
.
.
<td bgcolor=color_variable>${child.val().Status}</td>

【问题讨论】：

嘿 Sami，你将 bgcolor 值作为参数传递给 TD 是什么意思？在我看来，您已经在模板中为 bgcolor 分配了一个值，那么您是否需要能够使用变量来设置它？请在此处解释您要执行的操作。
你的意思是像bgcolor="${parameter}" 或bgcolor="${child.val().BgColor}" 如果child.val() 有其中之一

标签： javascript

【解决方案1】：

看起来您想通过更改 color_variable 来动态修改 bgColor。如果您没有使用 (vue, react, angular) 之类的框架，并且如果这是您想要的行为，您可能想做这样的事情：

let themeOptions = {
    color_variable: 'green'
}

function rerender() {
    let template = `
        <tr>
            <td bgcolor="${themeOptions.color_variable}">${"pump" + child.val().PumpID}</td>
            <td bgcolor="${themeOptions.color_variable}">${child.val().StartTime}</td>
            <td bgcolor="${themeOptions.color_variable}">${child.val().Duration}</td>
            <td bgcolor="${themeOptions.color_variable}">${child.val().GalsPumped}</td>
            <td bgcolor="${themeOptions.color_variable}">${child.val().Cycle}</td>
            <td bgcolor="${themeOptions.color_variable}">${child.val().Status}</td>
        </tr>`;
    table.innerHTML += template;
}

function changeColor(color) {
    themeOptions.color_variable = color;
    rerender();
}

changeColor('blue')

当然，这不是最好的代码示例，您可能想修改它以满足您的需要，但您明白了。您始终可以使用对象通过引用传递值并在以后修改该值。但是不要忘记你必须重新渲染 DOM.

【讨论】：