一个js函数调用多个元素，jsp

我有一个有许多行的表。在每一行中，我都必须显示具有给定值的倒数计时器。一个js函数调用多个元素，jsp

这是我在jsp中的js函数。

<script> 
function start(initial_time) { 
    var initialTime = initial_time.value; 

     tick(); 
     setInterval(function() { 
      tick(); 
      if (initialTime < -1) reset(); 
      if (initialTime < 6) paint("red") 
     }, 1000) 

    function tick() { 
     document.getElementById("time").innerHTML = initialTime.toString(); 
     --initialTime; 
    } 

    function reset() { 
     initialTime = 30; 
     tick(); 
     paint("black"); 
    } 

    function paint(color) { 
     document.getElementById("time").style.color = color; 
    } 
}

这是在同一个jsp页面

<table style="width: 100%; height: 100%; table-layout: fixed;" align="center"> 
<tbody > 
<c:forEach items="${data.getCards()}" var="card"> 
    <tr> 
     <td style="table-layout: fixed; vertical-align: middle; font-size: 30px; text-align: left; width: 100%; background-color: #78909C;" 
      colspan="4">${card.getLocationName()}</td> 
    </tr> 
    <tr> 
     <td style="vertical-align: middle; font-size: 24px; text-align: left; width: 70%; background-color: #b0bec5;" 
      colspan="3">Time left for next density check 
     </td> 
     <td style="vertical-align: middle; font-size: 22px; text-align: left; width: 30%; background-color: #b0bec5;" colspan="1"> 
      <div id="time" onload="start(${card.getDefaultServerDensityValue()})"></div>    <input hidden="hidden" id="density" value="${card.getDefaultServerDensityValue()}"/> 
     </td> 
    </tr>

我的表格行看起来不错，但在排定时器does'n露面，是否有人知道这是为什么？

来源

2016-09-06 Marta Ginosian

你是否在控制台登录initialTime.toString（）的值？ – cralfaro

是的，我做了，它读取，做了很多实验，以确保它读取的值，所以我们可以排除不读取价值版本。 –

即使我只添加一个数字，它仍然不显示。 –

您的HTML结构应该在JSP中。

<table id="mytable" style="width: 100%; height: 100%; table-layout: fixed;" align="center"> 
<tbody > 
<c:forEach items="${data.getCards()}" var="card"> 
    <tr> 
     <td style="table-layout: fixed; vertical-align: middle; font-size: 30px; text-align: left; width: 100%; background-color: #78909C;" 
      colspan="4">${card.getLocationName()}</td> 
    </tr> 
    <tr> 
     <td style="vertical-align: middle; font-size: 24px; text-align: left; width: 70%; background-color: #b0bec5;" 
      colspan="3">Time left for next density check 
     </td> 
     <td style="vertical-align: middle; font-size: 22px; text-align: left; width: 30%; background-color: #b0bec5;" colspan="1"> 
      <div data-timer="${card.getDefaultServerDensityValue()}"></div>    <input hidden="hidden" id="density" value="${card.getDefaultServerDensityValue()}"/> 
     </td> 
    </tr> 
</tbody> 
</table>

您的jQuery代码应该是

<script> 
function start(initial_time, ele) { 
    var initialTime = parseInt(initial_time); 

     tick(); 
     setInterval(function() { 
      tick(); 
      if (initialTime < -1) reset(); 
      if (initialTime < 6) paint("red") 
     }, 1000) 

    function tick() { 
     ele.innerHTML = initialTime.toString(); 
     --initialTime; 
    } 

    function reset() { 
     initialTime = 30; 
     tick(); 
     paint("black"); 
    } 

    function paint(color) { 
     ele.style.color = color; 
    } 
} 

$(document).ready(function(){ 
    $("#my_table tbody td[data-timer]").each(function(){ 
     start($(this).data("timer"),$(this)[0]); 
    }); 
})

来源

2016-09-06 10:27:06

似乎我的jsp页面不能识别“$”，是否需要导入任何内容？ –

是的，你必须使用jQuery库... :) –

不，它没有工作。 –

这是它是如何最终得到了做。 JQuery的部分

<script> 
function start(initial_time, ele) { 
    var initialTime = parseInt(initial_time); 

    tick(); 
    setInterval(function() { 
     tick(); 
     if (initialTime < -1) reset(); 
     if (initialTime < 6) paint("red") 
    }, 1000) 

    function tick() { 
     ele.innerHTML = initialTime.toString(); 
     --initialTime; 
    } 

    function reset() { 
     initialTime = initial_time; 
     tick(); 
     paint("red"); 
    } 

    function paint(color) { 
     ele.style.color = color; 
    } 
} 

(function() { 

    $("#mytable").find("div[data-timer]").each(function(){ 
     start($(this).data("timer"),$(this)[0]); 
    }); 
})();

对于那些像我谁是新的jQuery的，你需要包含在产品包装; UDE在JSP页面的Jquery库这样<head>后

<script src="http://code.jquery.com/jquery-1.10.2.js" 
    type="text/javascript"></script>`

包括标记

在JSP中，您的计时器元素看起来像

<div data-timer="${card.getDefaultServerDensityValue()}"></div>

您可以使用任何其他元素而不是<div>。

同时一定要给予一个id你的表

<table id="mytable" style="width: 100%; height: 100%; table-layout: fixed;" align="center">

，并确保表的ID在JavaScript中$("#mytable")匹配。

结果是

当红色数字倒计时。

来源

2016-09-06 13:02:06

一个js函数调用多个元素，jsp

回答

相关问题