0
我想編寫一個表格行編輯/保存功能，我可以選中複選框將新的日子添加到我的表格規則中，當我點擊編輯按鈕時，它會顯示原始複選框匹配表格規則的日期值。現在問題是，我想要滑塊時間也可以做到這一點，如果我點擊編輯按鈕，它會顯示正確的滑塊，匹配表規則的時間值，並在人們滑動滑塊時動態更改時間值，之後，人們也可以保存新的時間值。任何人都可以幫忙jQuery - 更改滑塊值並保存
$('#sliderTime').slider({
\t range: true,
\t min: 0,
\t max: 1440,
\t step: 60,
\t values: [400, 920],
\t \t \t
\t slide: function (e, ui) {
\t \t var hours1 = Math.floor(ui.values[0]/60);
\t \t var minutes1 = ui.values[0] - (hours1 * 60);
\t \t if (hours1.length == 1) hours1 = '0' + hours1;
\t \t if (minutes1.length == 1) minutes1 = '0' + minutes1;
\t \t if (minutes1 == 0) minutes1 = '00';
\t \t if (hours1 < 10) hours1 = '0' + hours1;
\t \t if (hours1 == 24) {
\t \t \t hours1 = "23";
\t \t \t minutes1 = "59";
\t \t }
\t \t $('#time1').html(hours1 + ':' + minutes1);
\t \t var hours2 = Math.floor(ui.values[1]/60);
\t \t var minutes2 = ui.values[1] - (hours2 * 60);
\t \t if (hours2.length == 1) hours2 = '0' + hours2;
\t \t if (minutes2.length == 1) minutes2 = '0' + minutes2;
\t \t if (minutes2 == 0) minutes2 = '00';
\t \t if (hours2 < 10) hours2 = '0' + hours2;
\t \t if (hours2 == 24) {
\t \t \t hours2 = "23";
\t \t \t minutes2 = "59";
\t \t }
\t \t $('#time2').html(hours2 + ':' + minutes2);
\t }
});
var dateVals = [];
$('#add').click(function() {
\t var dateVals = [];
\t $('#Date :checked').each(function() {
\t \t dateVals.push($(this).attr('name'));
\t });
var Time = $('#time1').html() + ' - ' + $('#time2').html();
\t
var row = '<tr class="myRows">'
\t \t \t + '<td class="rowDate">' + dateVals + '</td> '
\t \t + '<td class="rowTime">' + Time + '</td>'
\t \t \t + '<td><div><button type="button" class="edit">Edit</button></div></td>'
\t \t \t + '</tr>';
\t $(row).insertAfter($("#form > tbody > tr:last"));
\t $("#sliderTime").slider('values', [400, 920]);
$('#time1').text('07:00');
\t $('#time2').text('15:00');
\t $('#Date :checked').removeAttr('checked');
});
$('#form').on('click','.edit',function() {
\t var $row = $(this).closest('tr');
\t 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() {
\t 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>
\t <label></label>
<div>
\t \t <table id="Date">
\t \t \t <tbody>
\t \t \t \t <tr>
\t \t \t \t \t <th>Sun</th>
\t \t \t \t \t <th>Mon</th>
\t \t \t \t \t <th>Tue</th>
\t \t \t \t \t <th>Wed</th>
\t \t \t \t \t <th>Thu</th>
\t \t \t \t \t <th>Fri</th>
\t \t \t \t \t <th>Sat</th>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td><input name="Sunday" type="checkbox" value="0"></td>
\t \t \t \t \t <td><input name="Monday" type="checkbox" value="1"></td>
\t \t \t \t \t <td><input name="Tuesday" type="checkbox" value="2"></td>
\t \t \t \t \t <td><input name="Wednesday" type="checkbox" value="3"></td>
\t \t \t \t \t <td><input name="Thursday" type="checkbox" value="4"></td>
\t \t \t \t \t <td><input name="Friday" type="checkbox" value="5"></td>
\t \t \t \t \t <td><input name="Saturday" type="checkbox" value="6"></td>
\t \t \t \t </tr>
\t \t \t </tbody>
\t \t </table>
\t </div>
</div>
<br>
<div>
<span id="time1">07:00</span> - <span id="time2">15:00</span>
\t <br><br>
\t <div id="sliderTime" style="width:90%"></div>
</div>
<br>
<div>
<button type="button" id="add">Add</button>
</div>
<br>
<div>
<table id="form">
<tbody>
\t <tr>
\t \t \t <th>Table Rules</th>
\t </tr>
\t </tbody>
</table>
對不起，我還是不明白> –