jQuery和从开始和结束值动态生成的表答案

【问题标题】：jQuery and dynamically generated table from a start and finish valuejQuery和从开始和结束值动态生成的表
【发布时间】：2010-12-06 16:29:21
【问题描述】：

我想在使用 jQuery 的 html 表单上使用滑块。滑块需要 00:00 和 23:55 之间的值，并且必须处理它的开始和结束时间。从幻灯片生成的两个值中，需要生成一个表格（我假设使用某种 for 循环），开始时间和结束时间之间的所有时间都以 5 小步的增量显示。

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

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

丹

更新

好的，伙计们，我已经设法让滑块与 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

丹

再次更新

好的，现在几乎完成了，我已经从滑块创建了表格，现在我要做的就是将一个值从下拉框中传递到复选框。因此，例如，如果有人选择列表中的第三个值，则应该每三个复选框被选中。我认为它会像 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">

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

05 10 15 20 25 30 35 40 45 50 55 60

生成表

【问题讨论】：

jqueryui.com/demos/slider 但它使用整数值，因此，如果您将滑块上的范围设置为 0 到 1435 (23 * 60) + 55，步长为5 然后您可以转换为显示时间。

标签： javascript jquery javascript-events

【解决方案1】：

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

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

或类似的。其中period 是每个复选框为 1，每个其他为 2，以此类推...

【讨论】：

在 jQuery 中可能有一种更惯用的方法，但我不是专家。当你需要他的时候，尼克克拉弗在哪里？