我正在尝试创建一个响应式数据网格，我可以编辑和添加行。这些行来自数据库，在编辑或创建新行时，它应该更新/插入数据库中。 在过去，我只是使用普通表单和提交来处理PHP中的数据，现在我正试图以更现代的方式学习相同的东西。
我已经走了很长的路，我可以更新一行，并且可以插入一个新的，返回id并在表中使用它。然而，什么不起作用是更新刚刚插入的行。当我单击这样一行的编辑图标时，它似乎确实进入编辑模式，而是在后台插入一个新行。知道我哪里错了吗？
我也想知道是否有一种不那么复杂的方法来实现这一点，似乎我必须为只有3个字段的表编写一堆代码，有什么建议吗？
HTML部分如下所示：
<table class="table table-bordered" id="schedules">
<thead>
<tr>
<th>Time from</th>
<th>Time to</th>
<th>Enabled</th>
<th></th>
</tr>
</thead>
<tbody>
<tr id="1">
<td id="time_from">16:01</td>
<td id="time_to">23:01</td>
<td id="enabled">true</td>
<td id="edit"><i class="fa fa-pencil-square-o fa-fw" id="editicon"></i></td>
</tr>
<tr id="2">
<td id="time_from">10:00</td>
<td id="time_to">11:00</td>
<td id="enabled">false</td>
<td id="edit"><i class="fa fa-pencil-square-o fa-fw" id="editicon"></i></td>
</tr>
</tbody>
</table>
<i class="fa fa-plus" id="addRow"></i>
javascrip / jquery部分如下所示：
<script>
//function for when the addrow action is used
$('#addRow').on('click',function(){
$('#schedules > tbody:last-child').append('<tr id="newrow"><td id="time_from"><input id="time_from"/></td><td id="time_to"><input id="time_to"/></td><td id="enabled"><input id="enabled"/></td><td id="saveicon"><i class="fa fa-check fa-fw" id="saveicon"></i></td></tr>');
//function for when the save new row icon is pressed
$('#saveicon').on('click',function(){
//Send data to script to store as now row in db
$.get( "/settings/insertSchedule/" + $('#newrow input#time_from').val() + "/" + $('#newrow input#time_to').val() + "/" + $('#newrow input#enabled').val() , function( data ) {
//Change input fields to text fields
$('#newrow td#time_from').text($('#newrow input#time_from').val());
$('#newrow td#time_to').text($('#newrow input#time_to').val());
$('#newrow td#enabled').text($('#newrow input#enabled').val());
//change checkmark icon into edit icon
$('#newrow i#saveicon').attr('class', 'fa fa-pencil-square-o fa-fw');
$('#newrow i#saveicon').attr('id', 'editicon');
$('#newrow td#saveicon').attr('id', 'edit');
$('#newrow').attr('id',data);
console.log(data);
});
});
});
//function for when the edit row icon is clicked
var arr = {};
$('#schedules').on('click','#edit',function() {
var rowid = ($(this).parent().attr('id'));
$(this).siblings().each(
function(){
//end of editing, change the icon back to a pencil and change the fiels back to text
if ($(this).find('input').length){
$(this).text($(this).find('input').val());
$('#editicon').attr('class', 'fa fa-pencil-square-o fa-fw');
arr[this.id] = $(this).html()
}
else {
//start of editing, change fields to input fields and icon to checkmark
var t = $(this).text();
$(this).html($('<input />',{'value' : t}).val(t));
$('#editicon').attr('class', 'fa fa-check fa-fw');
}
});
//Send updated data to script to store in DB.
if (Object.keys(arr).length > 0){
$.get( "/settings/updateSchedule/" + rowid + "/" + arr.time_from + "/" + arr.time_to , function( data ) {});
}
});
</script>
编辑：我在jsfiddle中以略微修改的形式模拟了问题：jsfiddle.net/15dd3j3v
答案 0 :(得分：1)
这里是JSfiddle https://jsfiddle.net/15dd3j3v/5/
HTML：
<table class="table table-bordered" id="schedules" border="1">
<thead>
<tr>
<th>Time from</th>
<th>Time to</th>
<th>Enabled</th>
<th></th>
</tr>
</thead>
<tbody>
<tr id="1">
<td class="td_time_from">16:01</td>
<td class="td_time_to">23:01</td>
<td class="td_enabled">true</td>
<td class="button"><button class="editBtn"><i class="fa fa-pencil-square-o fa-fw" ></i> edit</button></td>
</tr>
<tr id="2">
<td class="td_time_from">10:00</td>
<td class="td_time_to">11:00</td>
<td class="td_enabled">false</td>
<td class="button"><button class="editBtn"><i class="fa fa-pencil-square-o fa-fw"></i> edit</button></td>
</tr>
</tbody>
</table>
<button id="addRow"><i class="fa fa-plus"></i> add row</button>
JS：
var fakeId = 3;
function getRowForSaving(){
return '<tr id="newrow"><td class="td_time_from"><input class="input_time_from"/></td><td class="td_time_to"><input class="input_time_to" /></td><td class="td_enabled"><input class="input_enabled" /></td><td><button class="saveBtn"><i class="fa fa-check fa-fw"></i>save</button><button class="cancelBtn">×</button></td></tr>';
}
function getRowWithData(id, time_from, time_to, enabled){
return '<tr id="'+id+'"><td class="td_time_from">'+time_from+'</td><td class="td_time_to">'+time_to+'</td><td class="td_enabled">'+enabled+'</td><td><button class="editBtn"><i class="fa fa-pencil-square-o fa-fw" ></i> edit</button></td></tr>';
}
function getRowForEdit(id, time_from, time_to, enabled){
return '<tr id="'+id+'"><td class="td_time_from"><input class="input_time_from" value="'+time_from+'" /></td><td class="td_time_to"><input class="input_time_to" value="'+time_to+'" /></td><td class="td_enabled"><input class="input_enabled" value="'+enabled+'" /></td><td><button class="saveEditBtn"><i class="fa fa-pencil-square-o fa-fw" ></i> Save edit</button></td></tr>';
}
//function for when the addrow action is used
$('#addRow').on('click', function() {
$('#schedules > tbody:last-child').append(getRowForSaving());
});
$('#schedules').on('click', '.cancelBtn', function(){
$(this).parents('tr').remove();
});
$('#schedules').on('click', '.saveBtn', function(){
var $row = $(this).parents('tr');
var time_from = $row.find('.input_time_from').val();
var time_to = $row.find('.input_time_to').val();
var enabled = $row.find('.input_enabled').val();
console.log("Save this datas \ntime_from: " + time_from + "\ntime_to: " + time_to + "\nenabled:"+enabled);
// SAVING FUNCTION
$row.replaceWith(getRowWithData(fakeId,time_from, time_to, enabled));
fakeId++;
});
$('#schedules').on('click', '.editBtn', function(){
var $row = $(this).parents('tr');
var id = $row.attr('id');
var time_from = $row.find('.td_time_from').text();
var time_to = $row.find('.td_time_to').text();
var enabled = $row.find('.td_enabled').text();
console.log("EDIT MODE for row: " + id );
$row.replaceWith(getRowForEdit(id, time_from, time_to, enabled));
});
$('#schedules').on('click', '.saveEditBtn', function(){
var $row = $(this).parents('tr');
var id = $row.attr('id');
var time_from = $row.find('.input_time_from').val();
var time_to = $row.find('.input_time_to').val();
var enabled = $row.find('.input_enabled').val();
console.log("Save the edit this datas \nid: "+id+"\ntime_from: " + time_from + "\ntime_to: " + time_to + "\nenabled:"+enabled);
// SAVE EDIT FUNCTION
$row.replaceWith(getRowWithData(id, time_from, time_to, enabled));
});
我重写了部分代码以满足您的需求。我试图尽可能地使用你的编码风格。有些部分是冗长的，以帮助理解。
但是我建议您使用像JQuery Grid http://www.trirand.com/blog/这样的预编写库，这是最好的解决方案，因为您必须努力获得具有JQgrid等深层功能的良好网格
如果您需要帮助，请写评论，记得投票并查看答案，如果有帮助byeee
答案 1 :(得分：0)
我会使用jquery数据表，https://www.datatables.net/examples/data_sources/server_side.html
你可以添加，编辑，删除行，然后执行任何操作，例如在执行此操作后调用php更新数据库