一個js函數調用，在多個元素中，jsp

Question

我的桌子上有很多行。 在每一行中，我必須顯示具有給定值的倒數計時器。

這是我在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>

似乎還可以，但沒有顯示行中的計時器，有人知道為什么嗎？

Answer 1

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

Answer 2

這是最終完成的方式。 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的人，您需要在JSP頁面中包含ude；

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

在<head>標記之后包含

在JSP中，您的timer元素將看起來像

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

您可以使用任何其他元素代替<div> 。

另外請確保為您的表格提供一個ID

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

並確保表格的ID與javascript中的$("#mytable")匹配。

結果是

紅色數字遞減計數的地方。

一個js函數調用，在多個元素中，jsp

問題描述

2 個解決方案

解決方案1
0 2016-09-06 10:27:06

解決方案2
0 2016-09-06 13:02:06

一個js函數調用，在多個元素中，jsp

問題描述

2 個解決方案

解決方案1 0 2016-09-06 10:27:06

解決方案2 0 2016-09-06 13:02:06

解決方案1
0 2016-09-06 10:27:06

解決方案2
0 2016-09-06 13:02:06