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页面中使用这样的方式添加jquery libs

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

在<head>代码

之后加入

在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")匹配。

结果是

红色数字倒计时。

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

2 个答案: