jQuery和从开始和结束值动态生成的表 [英] jQuery and dynamically generated table from a start and finish value
问题描述
我想使用jQuery在html表单上使用滑块。滑块需要00:00和23:55之间的值，并且必须处理它的开始和结束时间。从幻灯片生成的两个值中，需要生成一个表（我假设使用某种for循环），开始时间和结束时间之间的所有时间以五个小步的增量显示。
I'd like to use a slider on a html form using jQuery. The slider needs values from 00:00 and 23:55 and have to handles on it for start and finish times. From the two values generated from the slide a table needs to be generated (I assume with some kind of for loop) with all the times between the start time and finish time displayed in five minuet increments.
另一种方法是让两个选择菜单包含起始值和结束值（第二个必须动态生成我假设最终用户无法设置在开始时间之前完成时间。）
An alternative would be to have two select menus with the start and finish values (the second would have to be dynamically generated I assume so the end user can't set the finish time before the start time).
我更喜欢在jQuery中使用逻辑，因为应用程序的大小是jQuery。
如果有人可以提供帮助甚至建议从哪里开始，我将不胜感激。
I'd prefer to have the logic in jQuery as a sizeable chuck of the application is jQuery. If anyone could help or even suggest where to begin, I would appreciate it.
Dan
UPDATE
好的，我已经设法让滑块与jQuery UI一起使用现在我需要做的就是获取生成的值并循环生成它来生成包含两个值之间所有时间的表：
Ok guys, I've managed to get the slider working with the jQuery UI now all I need to do is take the values generated and loop through its to produce a table with all the times between the two values:
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选择时间范围
theres a nice little tutorial here to get this working with times:Using a jQuery UI Slider to Select a Time Range
现在，如果有人可以帮我在表格中输出时间，我们将不胜感激;-D
Now if anyone can help me to output the times in a table it would be appreciated ;-D
Dan
再次更新
好了现在几乎已经完成了，我已经创建了表格从滑块，现在我想要做的是从下拉框传递一个值到复选框。因此，例如，如果有人选择列表中的第3个值，则应选择每个第三个复选框。我认为它会像nth-child选择器一样容易，但3的测试值似乎不起作用
OK this is almost done now, I've created the table from the slider and now all I want to do is pass in a value from the drop down box to the check boxes. So for example, if someone selects the 3rd value in the list every third checkbox should be selected. I thought it would be as easy as nth-child selector but the test value of 3 doesn't seem to work
任何想法的人？源代码在这里，测试示例在这里：滑块测试，你可以看到我试图通过第3选择，但代码不起作用。如果我将$（'。chx：nth-child（3）'）更改为$（'。chx：odd'）或$（'。chx：even'），但这不会有任何好处，因为该值是动态的生成
Any ideas guys? The source code is here and the test example here: slider test, as you can see I'm trying to pass in the 3rd selected but the code doesn't work. it does if I change $('.chx:nth-child(3)') to $('.chx:odd') or $('.chx:even') but this wont be any good as the value is dynamically generated
<!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
$ b 55
60
生成表
05
10
15
20
25
30
35
40
45
50
55
60
generate table
推荐答案
哇，你做了很多没有答案的工作！我建议只是迭代每个复选框并使用模运算来确定是否应该设置它。例如。
Wow you've done a lot of work with no answers! I'd recommend just iterating through each checkbox and using modulo arithmetic to determine whether it should be set or not. eg.
var i=0;
$('.chx').each(function(){
$(this).attr('checked',(i % period==0));
i++;
});
或类似。每个复选框的期间为1，其他每个为2等...
or similar. Where period is 1 for every checkbox, 2 for every other etc...
这篇关于jQuery和从开始和结束值动态生成的表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
