php实时编辑表单,实时编辑表格，可以编辑的表格

for($colIndx=0;$colIndx<5;$colIndx++){

?>

"><?phpecho "Column $colIndx"?>

} ?>

for($rowIndx=0;$rowIndx<5;$rowIndx++){

?>

">

for($colIndx=0;$colIndx<5;$colIndx++){

?>

<?php  echo"R".$rowIndx."C".$colIndx?>

} ?>

} ?>

$(document).ready(function () {

$("#editTable tbody td").liveeditor({

editingCss: 'editing',

// Scroll to focused editor

onEditorFocused: function () {

var $window = $(window);

var $body = $('html, body');

var elem = $(this);

var elemTop = elem.offset().top;

var elemLeft = elem.offset().left;

var windowWidth = $window.width();

var windowHeight = $window.height();

var docViewTop = $window.scrollTop();

var docViewLeft = $window.scrollLeft();

var scrollVertical = (elemTop + elem.height() > docViewTop + windowHeight) || (elemTop < docViewTop);

var scrollHorizontal = (elemLeft + elem.width() > docViewLeft + windowWidth) || (elemLeft < docViewLeft);

if (scrollVertical && scrollHorizontal) {

//Scroll diagonally

$body.stop()

.animate({

scrollTop: (elemTop - windowHeight / 2) + 'px',

scrollLeft: (elemLeft - windowWidth / 2) + 'px'

}, 'fast');

} else if (scrollVertical) {

//Scroll vertically

$body.stop()

.animate({

scrollTop: (elemTop - windowHeight / 2) + 'px'

}, 'fast');

} else {

//Scroll horizontally

$body.stop()

.animate({

scrollLeft: (elemLeft - windowWidth / 2) + 'px'

}, 'fast');

}

},

//Track changes on row level

onChanged: function () {

var row = $(this).closest('tr');

if ($('.liveeditor-changed',row).length > 0)

row.addClass('changed');

else

row.removeClass('changed');

}

});

//Save changes

$('#saveButton').click(function () {

$.liveeditor.closeEditor($("#editTable tbody td"));

var headers = $('#editTable thead tr th');

$('#editTable tbody tr.changed').each(function () {

var row = $(this);

var data = "row=" + row.attr("row") + "&" + $.liveeditor.serialize($('td', row), headers);

$.ajax({

type:"POST",

url: "ajax.php",

data: data,

success: function(data){

$('#ajaxResponses').append("

" + data + "

");

$.liveeditor.reset($("#editTable tbody td"));

},

error: function(){

console.log("Failed to save changes");

}

});

});

});

});