【发布时间】：2015-11-11 07:26:56
【问题描述】：
我想编写一个表格行编辑/保存功能，我可以选中复选框以将新的日期添加到我的表格规则中，当我单击编辑按钮时，它将显示与表格规则的日期值匹配的原始复选框。现在的问题是，我希望滑块时间也可以这样做，如果我单击编辑按钮，它将显示与表格规则的时间值匹配的正确滑块，并在人们滑动滑块时动态更改时间值，之后，人们也可以保存新的时间值。有人可以帮忙吗？
$('#sliderTime').slider({
range: true,
min: 0,
max: 1440,
step: 60,
values: [400, 920],
slide: function (e, ui) {
var hours1 = Math.floor(ui.values[0] / 60);
var minutes1 = ui.values[0] - (hours1 * 60);
if (hours1.length == 1) hours1 = '0' + hours1;
if (minutes1.length == 1) minutes1 = '0' + minutes1;
if (minutes1 == 0) minutes1 = '00';
if (hours1 < 10) hours1 = '0' + hours1;
if (hours1 == 24) {
hours1 = "23";
minutes1 = "59";
}
$('#time1').html(hours1 + ':' + minutes1);
var hours2 = Math.floor(ui.values[1] / 60);
var minutes2 = ui.values[1] - (hours2 * 60);
if (hours2.length == 1) hours2 = '0' + hours2;
if (minutes2.length == 1) minutes2 = '0' + minutes2;
if (minutes2 == 0) minutes2 = '00';
if (hours2 < 10) hours2 = '0' + hours2;
if (hours2 == 24) {
hours2 = "23";
minutes2 = "59";
}
$('#time2').html(hours2 + ':' + minutes2);
}
});
var dateVals = [];
$('#add').click(function() {
var dateVals = [];
$('#Date :checked').each(function () {
dateVals.push($(this).attr('name'));
});
var Time = $('#time1').html() + ' - ' + $('#time2').html();
var row = '<tr class="myRows">'
+ '<td class="rowDate">' + dateVals + '</td> '
+ '<td class="rowTime">' + Time + '</td>'
+ '<td><div><button type="button" class="edit">Edit</button></div></td>'
+ '</tr>';
$(row).insertAfter($("#form > tbody > tr:last"));
$("#sliderTime").slider('values', [400, 920]);
$('#time1').text('07:00');
$('#time2').text('15:00');
$('#Date :checked').removeAttr('checked');
});
$('#form').on('click','.edit',function() {
var $row = $(this).closest('tr');
var rowDate = $row.find('.rowDate');
var days = rowDate.text().split(',');
rowDate.html($('#Date').clone());
rowDate.find(':checkbox').each(function(){
if ( $.inArray($(this).attr('name'), days) !== -1 ) {
$(this).prop('checked', true);
}
});
$(this).replaceWith('<button type="button" class="save">Save</button>');
});
$('#form').on('click','.save',function() {
var parent = $(this).closest('.myRows');
var rowDate = parent.find('.rowDate');
var days = rowDate.find(':checkbox:checked').map(function(){
return this.name
}).get().join(',');
rowDate.empty().text(days);
$(this).replaceWith('<button type="button" class="edit">Edit</button>');
});<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<label></label>
<div>
<table id="Date">
<tbody>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td><input name="Sunday" type="checkbox" value="0"></td>
<td><input name="Monday" type="checkbox" value="1"></td>
<td><input name="Tuesday" type="checkbox" value="2"></td>
<td><input name="Wednesday" type="checkbox" value="3"></td>
<td><input name="Thursday" type="checkbox" value="4"></td>
<td><input name="Friday" type="checkbox" value="5"></td>
<td><input name="Saturday" type="checkbox" value="6"></td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
<div>
<span id="time1">07:00</span> - <span id="time2">15:00</span>
<br><br>
<div id="sliderTime" style="width:90%"></div>
</div>
<br>
<div>
<button type="button" id="add">Add</button>
</div>
<br>
<div>
<table id="form">
<tbody>
<tr>
<th>Table Rules</th>
</tr>
</tbody>
</table>【问题讨论】：
标签： jquery dynamic slider edit