我想写一个表格行编辑/保存功能，我可以选中复选框，为我的表格规则添加新的日期，当我点击编辑按钮时，它会显示与表格规则的日期值相匹配的原始复选框。现在问题是，我想滑块时间也可以这样做，如果我点击编辑按钮，它将显示与表规则的时间值匹配的正确滑块，并在人们滑动滑块时动态更改时间值，之后，人们还可以保存新的时间价值。有人可以帮忙吗？
$('#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>
答案 0 :(得分：0)
只需在编辑行时创建一个标记变量，然后在编辑模式下，使滑块更新正在编辑的行的html。我做了一个基本的例子，但是你需要扩展它以使它能够编辑多行：
var editing = false;
$('#sliderTime').slider({
range: true,
min: 0,
max: 1440,a
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';$('#time1').change(function(){
alert('hello');
});
if (hours2 < 10) hours2 = '0' + hours2;
if (hours2 == 24) {
hours2 = "23";
minutes2 = "59";
}
$('#time2').html(hours2 + ':' + minutes2);
if (editing) $('.rowTime').html(hours1 + ':' + minutes1 + ' - ' + 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() {
editing = true;
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() {
editing = false;
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>');
});
答案 1 :(得分：0)
#add 在添加新值时，您可以通过这种方式获得。
alert( $('#sliderTime').slider('values') );
你必须这样做，我必须用旧的更改这些新值。放轻松。
$("#sliderTime").slider('values', [400, 920]);