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>

我希望这行是RED。但事实并非如此。

你能告诉我我做错了吗？

Answer 1

无法评论所以在答案中提问，您是否尝试在html下面编写js代码？在加载html之后需要执行JS，并且在处理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 个答案: