jQuery和根據起始值和結束值動態生成的表

Question

我想在使用jQuery的html表單上使用滑塊。 滑塊需要從00:00到23:55的值，並且必須在其上處理開始和結束時間。 從幻燈片中生成的兩個值中，需要生成一個表（我假設使用某種for循環），並且開始時間和結束時間之間的所有時間以五分鍾的增量顯示。

另一種選擇是使用兩個帶有開始和結束值的選擇菜單（第二個菜單必須動態生成，我認為最終用戶無法在開始時間之前設置結束時間）。

我更喜歡jQuery中的邏輯，因為該應用程序的一個很大的優點就是jQuery。 如果有人可以幫助甚至建議從哪里開始，我將不勝感激。

擔

UPDATE

好的，我已經設法使滑塊與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();

這里有一個不錯的小教程，可以使它與時間配合使用：使用jQuery UI Slider選擇時間范圍

現在，如果有人可以幫助我將時間輸出到表格中，將不勝感激;-D

擔

再次更新

好的，這幾乎完成了，我已經從滑塊創建了表格，現在我要做的就是將一個值從下拉框傳遞到復選框。 因此，例如，如果有人在列表中選擇了第三個值，則應選中每個第三個復選框。 我以為它將像第n個子選擇器一樣簡單，但是3的測試值似乎不起作用

有想法嗎？ 源代碼在這里，測試示例在這里： Slider test ，您可以看到我試圖傳遞選擇的第3個，但是代碼不起作用。 如果我將$（'。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

生成表

Answer 1

哇，您做了很多工作而沒有答案！ 我建議只遍歷每個復選框並使用取模算法來確定是否應設置它。 例如。

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

或類似。 每個復選框的period為1，其他每個period為2 ...

jQuery和根據起始值和結束值動態生成的表

問題描述

1 個解決方案

解決方案1
1 已采納 2010-12-07 17:17:13

jQuery和根據起始值和結束值動態生成的表

問題描述

1 個解決方案

解決方案1 1 已采納 2010-12-07 17:17:13

解決方案1
1 已采納 2010-12-07 17:17:13