使用基於值的Javascript設計HTML樣式

我試圖根據該行中的值設置HTML表格的樣式，但是我被卡在第1步 - 完全沒有樣式！使用基於值的Javascript設計HTML樣式

這裏是我的代碼：

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

<％= J>時由這是一個從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"; }

我能弄清楚 - 感謝您的幫助！

來源

2016-01-20 Matthew Dickens

首先，你沒有關閉你的''標籤。其次，爲什麼不只是做'」style =「background-color：red」>'？更好的是，如果你可以用CSS樣式表做這個工作。 –

，因爲有很多行，你可能會用不同的ID多次添加相同的腳本標記，這不是正確的方法。你可以使用其他選擇器來獲取循環中的值，並根據你的邏輯添加樣式。 – Sachin

你檢查你的JavaScript控制檯？

ATLEAST應該document.getElementById不document.getElementByID

來源

2016-01-20 17:56:01 Mico

哇，我是個傻瓜。 –

你的腳本執行得太早 - html還沒有準備好。嘗試

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

但它醜陋的想法去做被JS

來源

2016-01-20 17:51:33 Darth

@邁克好吧，我改變我的回答 – Darth

我覺得它更好地使用自定義屬性，而不是字符串連接：

<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"]) } 
    ); 
});

來源

2016-01-20 18:13:27 Malk

使用基於值的Javascript設計HTML樣式

回答

相關問題