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

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

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

我更愿意将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();

这里那里有一个漂亮的小教程，以得到这个与时俱进的工作：Using a jQuery UI Slider to Select a Time Range

现在，如果有人能帮助我输出时间在表中我们将不胜感激;-D

丹

再次更新

确定这几乎是现在完成了，我已经创建了从表滑块，现在我想要做的就是将下拉框中的值传递给复选框。例如，如果有人选择列表中的第三个值，则应选择每第三个复选框。我认为它会像第n个孩子选择一样容易，但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>

生成表

来源

2010-12-06 Daniel James Clarke

http://jqueryui.com/demos/slider/但它使用整数值，所以，如果您将滑块上的范围从0到1435 *（23 * 60）+ 55 *，步数为5，您可以转换为显示时间。 – Josh 2010-12-06 19:13:57

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

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

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

来源

2010-12-07 17:17:13

像梦一样工作，谢谢！:-) – 2010-12-08 09:36:10

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

回答

相关问题