个人中心
gpt4 book ai didi

javascript - jQuery 和从开始值和结束值动态生成的表

转载 作者：行者123 更新时间：2023-11-30 06:06:21 24 4
gpt4 key购买 nike

我想使用 jQuery 在 html 表单上使用 slider 。 slider 需要从 00:00 到 23:55 的值，并且必须处理开始和结束时间。需要根据幻灯片生成的两个值生成一个表格(我假设使用某种 for 循环)，其中开始时间和结束时间之间的所有时间以五分钟为增量显示。

另一种方法是使用两个带有开始值和结束值的选择菜单(我认为第二个菜单必须动态生成，因此最终用户无法在开始时间之前设置结束时间)。

我更喜欢在 jQuery 中使用逻辑，因为应用程序的一个相当大的夹头是 jQuery。如果有人可以提供帮助甚至建议从哪里开始，我将不胜感激。

丹

更新

我已经设法让 slider 与 jQuery UI 一起工作，现在我需要做的就是获取生成的值并循环遍历它以生成一个包含两个值之间所有时间的表:

            var startTime;
        var endTime;
        $("#slider-range").slider({
            range: true, min: 0, max: 1439, values: [540, 1020], step:5, slide: slideTime, /*change: */
        });
        function slideTime(event, ui){
            var minutes0 = parseInt($("#slider-range").slider("values", 0) % 60);
            var hours0 = parseInt($("#slider-range").slider("values", 0) / 60 % 24);
            var minutes1 = parseInt($("#slider-range").slider("values", 1) % 60);
            var hours1 = parseInt($("#slider-range").slider("values", 1) / 60 % 24);
            startTime = getTime(hours0, minutes0);
            endTime = getTime(hours1, minutes1);
            $("#time").html('Opening time: ' + startTime + '<br /> Closing time: ' + endTime);
        }
        function getTime(hours, minutes) {
            
            minutes = minutes + "";
            if (hours == 12) {
                hours = 12;
            }
            if (hours > 12) {
                hours = hours  ;
            }
            if (minutes.length == 1) {
                minutes = "0" + minutes;
            }
            return hours + ":" + minutes ;
    }
    
    slideTime();

这里有一个很好的小教程来让这个与时间一起工作:Using a jQuery UI Slider to Select a Time Range

现在，如果有人可以帮助我在表格中输出时间，我将不胜感激；-D

再次更新

好的，现在差不多完成了，我已经从 slider 创建了表格，现在我要做的就是将下拉框中的值传递给复选框。因此，例如，如果有人选择列表中的第三个值，则应选中每三个复选框。我认为它会像 nth-child 选择器一样简单，但 3 的测试值似乎不起作用

有什么想法吗？源代码在这里，测试示例在这里:slider test ，如您所见，我正在尝试传递第三个选择，但代码不起作用。如果我将 $('.chx:nth-child(3)') 更改为 $('.chx:odd') 或 $(' .chx:even') 但这不会有任何好处，因为该值是动态生成的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
    <link rel="stylesheet" type="text/css" href="stylesheets/custom-theme/jquery-ui-1.8.6.custom.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var startTime;
            var endTime;
            
            $("#slider-range").slider({
                range: true, min: 0, max: 1439, values: [540, 1020], step:5, slide: slideTime, /*change: */
            });
            
            function slideTime(event, ui){
                var minutes0 = parseInt($("#slider-range").slider("values", 0) % 60);
                var hours0 = parseInt($("#slider-range").slider("values", 0) / 60 % 24);
                var minutes1 = parseInt($("#slider-range").slider("values", 1) % 60);
                var hours1 = parseInt($("#slider-range").slider("values", 1) / 60 % 24);
                startTime = getTime(hours0, minutes0);
                endTime = getTime(hours1, minutes1);
                $("#time").html('Opening time: ' + startTime + '<br /> Closing time: ' + endTime);
            }
            function getTime(hours, minutes) {
                minutes = minutes + "";
                if (hours == 12) {
                    hours = 12;
                }
                if (hours > 12) {
                    hours = hours  ;
                }
                if (minutes.length == 1) {
                    minutes = "0" + minutes;
                }
                return hours + ":" + minutes ;
        }
        function getTimeloop(minutesloop) {
                minutesloop = minutesloop + "";
                if (minutesloop.length == 1) {
                    minutesloop = "0" + minutesloop;
                }
                return minutesloop ;
        }   
        slideTime();
        
        $('#generateTable').click(function(){
            var startLoop = parseInt($("#slider-range").slider("values", 0));
            var endLoop = parseInt($("#slider-range").slider("values", 1));
            $('#table').remove();
            $('<table id="table"><tr><th>Times</th><th>Bookable</th><tr>').insertAfter('#generateTable');
            for(i = startLoop; i < endLoop; i+=5)
            {
                $('<tr><td>' + parseInt(i/ 60 % 24) + ':' +  getTimeloop(parseInt(i % 60)) + '</td><td><input class="chx" name="' + parseInt(i/ 60 % 24) + ':' +  getTimeloop(parseInt(i % 60)) + '" type="checkbox" value="' + parseInt(i/ 60 % 24) + ':' +  getTimeloop(parseInt(i % 60)) + '" /></td></tr>').appendTo('#table');
            }
        
    
        $('.chx:nth-child(3)').attr('checked', true);
        
    });
    });
    </script>
    <style>
        #slider-range{width:800px;}
        #slider-range,#time{margin:10px;display:block;}
    </style>
</head>
<body>
        <div id="slider-range"></div>
        <span id="time"></span>
    <select>
      <option value="0">05</option>
      <option value="1">10</option>
      <option value="2" selected="selected">15</option>
      <option value="3">20</option>
      <option value="4">25</option>
      <option value="5">30</option>
      <option value="6">35</option>
      <option value="7">40</option>
      <option value="8">45</option>
      <option value="9">50</option>
      <option value="10">55</option>
      <option value="11">60</option>
    </select>
    <br />
    <br />
        <a id="generateTable"href="javascript:;">generate table</a>
        
</body>
</html>

最佳答案

哇，你做了很多工作却没有答案!我建议只遍历每个复选框并使用模运算来确定是否应该设置它。例如。

var i=0;
$('.chx').each(function(){
    $(this).attr('checked',(i % period==0));
    i++;
});

或类似的。其中 period 是每个复选框 1 个，其他 2 个等等...

关于javascript - jQuery 和从开始值和结束值动态生成的表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4368620/

24 4 0
文章推荐： javascript - 向下滑动div的 "height:auto"技巧是什么
文章推荐： javascript - 查找捕获的起始索引(以字符串形式)[JS/RegExp]
文章推荐： javascript - TinyMCE 包含元素？
文章推荐： javascript - 除了Ajaxian之外，还有什么网站可以随时了解Javascript和AJAX新闻？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com