HTML-JavaScript-Spring根據值更改行顏色

Question

我有一個由Spring Model初始化的變量，根據列的值，我需要顯示背景的相關顏色。

我嘗試了以下JavaScript代碼，但無法正常工作：

<head>
<script type="text/javascript">
<!--
    var table = document.getElementById("dataStatusVar");    
    var tbody = table.getElementsByTagName("tbody")[0];
    var rows = tbody.getElementsByTagName("tr");

    // add event handlers so rows light up and are clickable
    for (i=0; i < rows.length; i++) {
        var value = rows[i].getElementsByTagName("td")[0].firstChild.nodeValue;
        if (value == 'mraible') {
            rows[i].style.backgroundColor = "red";
        }
    }           
-->
</head>
<body>
  <div>
    <table id="dataStatusVar">
      <tr>
        <th>TYPE</th>
        <th>START</th>
        <th>END</th>
      </tr>

      <tr>
        <td>mraible</td>
        <td>startvalue</td>
        <td>endvalue</td>
      </tr>
    </table>
  </div>
</body>

我希望該行是紅色的。 但事實並非如此。

您能建議我做錯了嗎？

Answer 1

無法評論，所以在回答中問，您是否嘗試過在html下方編寫js代碼？ JS需要在加載html之后執行，並且在處理JSTL時使用一個單獨的文件可以說是很奇怪的，因此最好的選擇是在HTML和JSTL完成后執行js代碼。

Answer 2

如果您可以選擇jstl，則以下代碼

 <c:forEach items="${rows}" var="usr" varStatus="st"> <c:choose> <c:when test="${st.index%2 eq 0}"> <c:set var="tr" value="red"></c:set> </c:when> <c:otherwise> <c:set var="tr" value="blue"></c:set> </c:otherwise> </c:choose> <div> <table id="dataStatusVar"> <tr> <th>TYPE</th> <th>START</th> <th>END</th> </tr> <tr bgcolor="{tr}"> <td>mraible</td> <td>startvalue</td> <td>endvalue</td> </tr> </table> </div> </c:forEach>

Answer 3

您可以嘗試以下方法：

<body>
  <div>
    <table id="dataStatusVar">
      <tr>
        <th>TYPE</th>
        <th>START</th>
        <th>END</th>
      </tr>

      <tr>
        <td>mraible</td>
        <td>startvalue</td>
        <td>endvalue</td>
      </tr>
    </table>
  </div>
</body>

<script>
    var table = document.getElementById("dataStatusVar");    
var tbody = table.getElementsByTagName("tbody")[0];
var rows = tbody.getElementsByTagName("tr");

// add event handlers so rows light up and are clickable
for (i=0; i < rows.length; i++) {
    var tds = rows[i].getElementsByTagName("td");
    if (tds.length) {
        var value = tds[0].innerHTML;
        if (value == 'mraible') {
            rows[i].style.background = "red"; // for entire row
            //tds[0].style.background = "red"; // for a cell
        }
    }
}           
</script>

Answer 4

如果功能/聲明依賴於DOM元素，則必須采取措施，在執行該功能/聲明元素期間，應該有（加載）用於處理的元素。 所以，一旦元素被加載（在主體中），我就調用了setColour（）函數

<html>
<head>
<script type="text/javascript">
    function setColour()
    {
        var table = document.getElementById("dataStatusVar"); //Gets the required table   
        var tbody = table.getElementsByTagName("tbody")[0];
        var rows = tbody.getElementsByTagName("tr"); //Gets the trs from the table

        for (i=0; i < rows.length; i++) {//For each row in the table
            var tdelements = rows[i].getElementsByTagName("td")[0]; //First cell in the selected row
            if (tdelements != null) { //If first cell exists
                var value = tdelements.innerHTML; //Fetch the content of the first cell in the selected row
                if (value === 'mraible') { //Checks if the cell has expected value
                    rows[i].style.background = "red"; // Sets red color for the entire row
                }
            }
        }           
    }
</script>
</head>
<body onload="setColour()">
  <div>
    <table id="dataStatusVar">
      <tr>
        <th>TYPE</th>
        <th>START</th>
        <th>END</th>
      </tr>
      <tr>
        <td>mraible</td>
        <td>startvalue</td>
        <td>endvalue</td>
      </tr>
      <tr>      
      </tr>
    </table>
  </div>
</body>
</html>

根據您的樣本，我假設如果行中第一列的內容匹配特定值，則必須為整個行設置顏色。

HTML-JavaScript-Spring根據值更改行顏色

問題描述

4 個解決方案

解決方案1
0 2014-05-06 06:35:43

解決方案2
0 2014-05-06 07:01:55

解決方案3
0

解決方案4
0 2016-01-08 09:24:52

HTML-JavaScript-Spring根據值更改行顏色

問題描述

4 個解決方案

解決方案1 0 2014-05-06 06:35:43

解決方案2 0 2014-05-06 07:01:55

解決方案3 0

解決方案4 0 2016-01-08 09:24:52

解決方案1
0 2014-05-06 06:35:43

解決方案2
0 2014-05-06 07:01:55

解決方案3
0

解決方案4
0 2016-01-08 09:24:52