Question

我正在尝试根据该行中的值设置HTML表格行的样式，但我仍然坚持第1步 - 完全设置样式！

这是我的代码：

<tr id="tablerow<%=j%>">
<script type="text/javascript">
     document.getElementById("tablerow<%=j%>").style.backgroundColor = "red";
</script>

＆LT;％= J＆GT;从加载表中从Access数据库加载数据的循环中拉出一个行号。

表格行未显示为红色！

然后我将在Javascript中使用一些IF语句根据来自某些元素的数据为行着色：

var datecheck = new Date;
if (document.getElementById("confirmStatus<%=j%>").value=="P" && (document.getElementById("confirmYear<%=j%>").value < datecheck.getFullYear())) {
        document.getElementById("tablerow<%=j%>").style.backgroundColor = "LightCoral"; }

我能够弄清楚 - 感谢您的帮助！

Answer 1

您检查过JavaScript控制台吗？

至少应该document.getElementById而不是document.getElementByID

Answer 2

你的脚本执行得太早 - html还没有准备好。尝试

<tr id="tablerow<%=j%>">
<script type="text/javascript">
     window.addEventListener('load',function(){
         document.getElementByID("tablerow<%=j%>").style.backgroundColor = "red";
     }
</script>

但是这个丑陋的想法是由js

来做的

Answer 3

我发现使用自定义属性而不是字符串连接更好：

<tr data-dbid="<%=j%>" style="background-color:red">
  <td><input class="confirmYear" /></td>
  <td><input class="confirmStatus" /></td>
</tr>

然后在需要时使用它：

function checkRow(id) {
    var _tr = document.querySelector("[data-dbid=" + id + "]"),
        _confirmYear = _tr.querySelector(".confirmYear"),
        _confirmStatus = _tr.querySelector(".confirmStatus");

    if (_confirmYear.value === "P" && _confirmStatus.value < datecheck.getFullYear())
       _tr.style.backgroundColor = "LightCoral";

}

window.addEventListener('load',function(){
    [].forEach.call(
       document.querySelectorAll("[data-dbid]"),
       function(el) { checkRow(el.dataset["dbid"]) }
    );
});

使用基于值的Javascript设置HTML样式

3 个答案: