如何在Gridview标签中显示javascript var值

How to Display javascript var Value in Gridview Label

本文关键字：显示 javascript var 标签 Gridview      更新时间：2023-09-26

在我的应用程序中，我正在计算两个值之间的时间(例如:上午9点到下午3点)，为此，我使用Javascript函数，它工作得很好，但是，在这里我想在gridview中显示时间，在gridview中，我正在为gridview行中的显示时间创建标签，下面是我尝试的代码:

aspx.cs: 

 DateTime now = DateTime.Now;
        DateTime fourOClock = DateTime.Today.AddHours(21.50);
        msUntilFour = (int)((fourOClock - now).TotalSeconds);

这里我发送msUntilFour值到Javascript(以下代码)

<script>
     var JavascriptBlah = '<%=msUntilFour%>'
    var upgradeTime = JavascriptBlah;
    var seconds = upgradeTime;
    function timer() {
        var days = Math.floor(seconds / 24 / 60 / 60);
        var hoursLeft = Math.floor((seconds) - (days * 86400));
        var hours = Math.floor(hoursLeft / 3600);
        if (hours < 10) {
            hours = "0" + hours;
        }
        var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
        var minutes = Math.floor(minutesLeft / 60);
        var remainingSeconds = seconds % 60;
        if (remainingSeconds < 10) {
            remainingSeconds = "0" + remainingSeconds;
        }
        document.getElementById('countdown').innerHTML = hours + ":" + minutes + ":" + remainingSeconds;
if (seconds == 0) {
            clearInterval(countdownTimer);
            document.getElementById('countdown').innerHTML = "Completed";
        } else {
            seconds--;
        }
    }
    var countdownTimer = setInterval('timer()', 1000);
</script>

然后我显示时间跨度(以下代码)

<h3><span id="countdown" class="timer" ></span></h3>

到这里它工作得很好，但我想在gridview中显示输出时间，就像下面的

 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
                 <Columns>
                    <asp:BoundField DataField="Name" HeaderText="Name" />
                    <asp:BoundField DataField="CreateTs" HeaderText="Created Time" />
                      <asp:BoundField DataField="Time Left" HeaderText="Time Remaining" />
                     <asp:TemplateField HeaderText="Speciality" Visible="true">
                                    <ItemTemplate>
                                     <h3><span id="countdown" class="timer" runat="server" ></span></h3>
                                    </ItemTemplate>
                                </asp:TemplateField>
                 </Columns>
                </asp:GridView>

这里我想在Gridview模板标签中显示时间。我该怎么做呢?提前感谢……@

我假设GridView有多行。如果是这种情况，span元素的ID将被复制。在我的例子中，id被附加行号以使其唯一。其次，在常规html元素中不需要runat="server"。在我的例子中，ID是不需要的，但是你以后可能会需要它，并且有重复的ID是不好的做法。

当页面加载完成后，脚本将使用timer类循环页面上的所有元素，并将原始代码片段中的时间放入span中。注意使用$(this).html而不是$(this).val，因为该值是元素内部的html内容，而不是TextBox的值。

        <asp:GridView ID="GridView1" runat="server">
            <Columns>
                <asp:TemplateField HeaderText="" Visible="true">
                    <ItemTemplate>
                        <h3><span id="countdown_<%# Container.DataItemIndex %>" class="timer"></span></h3>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <script type="text/javascript">
            $(document).ready(function () {
                $(".timer").each(function () {
                    var JavascriptBlah = '<%=msUntilFour%>'
                    var upgradeTime = JavascriptBlah;
                    var seconds = upgradeTime;
                    var days = Math.floor(seconds / 24 / 60 / 60);
                    var hoursLeft = Math.floor((seconds) - (days * 86400));
                    var hours = Math.floor(hoursLeft / 3600);
                    if (hours < 10) {
                        hours = "0" + hours;
                    }
                    var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
                    var minutes = Math.floor(minutesLeft / 60);
                    var remainingSeconds = seconds % 60;
                    if (remainingSeconds < 10) {
                        remainingSeconds = "0" + remainingSeconds;
                    }
                    $(this).html(hours + ":" + minutes + ":" + remainingSeconds);
                    if (seconds == 0) {
                        clearInterval(countdownTimer);
                        $(this).html("Completed");
                    } else {
                        seconds--;
                    }
                });
            });
        </script>

尝试每次在某一行加载span时调用计时器函数，并通过将timer(this)添加到span标签中来传递HTML元素给该函数:

 <ItemTemplate>
  <h3><span id="countdown" class="timer" runat="server" onload="timer(this)"></span></h3>
 </ItemTemplate>

一旦函数被调用，你可以访问传递给它的html元素使用jquery $(element).html('urData')或$(element).val('urData')或$(element).text('urData'):

  function timer(Element) {
    var days = Math.floor(seconds / 24 / 60 / 60);
    var hoursLeft = Math.floor((seconds) - (days * 86400));
    var hours = Math.floor(hoursLeft / 3600);
    if (hours < 10) {
        hours = "0" + hours;
    }
    var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
    var minutes = Math.floor(minutesLeft / 60);
    var remainingSeconds = seconds % 60;
    if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds;
    }
    $(Element).val(hours + ":" + minutes + ":" + remainingSeconds);
    if (seconds == 0) {
        clearInterval(countdownTimer);
        $(Element).val("Completed");
    } else {
        seconds--;
    }
}

希望这对你有用

相关文章：