一個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

回答

相關問題