假设我有一张桌子：
<table class="table table-bordered table-hover" id="myTableJD">
<thead>
<tr>
<th>JOB DESCRIPTION</th>
<th>CONTROL</th>
</tr>
</thead>
<tbody>
<?php
foreach ($JobDescription as $rowJD1)
{
echo '<tr id="itemk_'.$rowJD1["id"].'">';
echo '<td class="customerIDCell">'.$rowJD1["JobDescription"].'</td>';
echo '<td><a href="#" class="edit_buttonk" id="editk-'.$rowJD1["id"].'">Edit</a> | <a href="#" class="del_buttonk" id="delk-'.$rowJD1["id"].'">Delete</a></td>';
echo '</tr>'; //i changed this part to </tr> and close the last </td> to avoid confusion
}
?>
</tbody>
</table>
这是我使用 jquery jquery-1.8.2.min.js的 javascript
//##### Add record when Add Record Button is clicked #########
$("#FormSubmitJD").click(function (e) {
e.preventDefault();
if($("#contentTextJD").val()==="") //simple validation
{
alert("Please enter some text!");
return false;
}
var myData = "jd="+ $("#contentTextJD").val(); //post variables
jQuery.ajax({
type: "POST", // HTTP method POST or GET
url: "<?php echo BASE_URL."programs/SaveJobDescription.php"; ?>", //Where to make Ajax calls
dataType:"text", // Data type, HTML, json etc.
data:myData, //post variables
success:function(response){
$('#IDJOBDESCRIPTION').modal('hide');
<?php
$getLastID = $emp->getLastID($_SESSION['UEmpID']) + 1;
$itemk_id = "itemk_".$getLastID;
$delk_id = "delk-".$getLastID;
$editk_id = "editk-".$getLastID;
?>
$('#myTableJD').append('<tr id="<?php echo $itemk_id; ?>"><td>'+$("#contentTextJD").val()+'</td><td><a href="#" class="edit_buttonk" id="<?php echo $editk_id; ?>" >Edit</a> | <a href="#" class="del_buttonk" id="<?php echo $delk_id; ?>">Delete</a></td></tr>');
$("#contentTextJD").val(''); //empty text field after successful submission
},
error:function (xhr, ajaxOptions, thrownError){
alert(thrownError); //throw any errors
}
});
});
//##### edit record when edit Button is clicked #########
$("body").on("click", ".edit_buttonk", function(e) {
e.preventDefault();
var clickedID = this.id.split("-"); //Split string (Split works as PHP explode)
var DbNumberID = clickedID[1]; //and get number from array
<?php
$getJD = $emp->getJD($_SESSION['UEmpID']);
$jdValue = $getJD;
?>
var tr = $(this).parent().parent();
alert(tr);
var new_row = '<tr id="itemk_'+DbNumberID+'"><td style="margin-bottom:-10px;padding-bottom:0px;"><input id="jd-'+DbNumberID+'" type="text" value="<?php echo $jdValue; ?>" class="span12"/> </td><td><a href="#" class="save_buttonk" id="jdSave-'+DbNumberID+'">Save</a></td></tr>';
alert(new_row);
tr.replaceWith(new_row);
});
//##### save record when save Button is clicked #########
$("body").on("click", ".save_buttonk", function(e) {
e.preventDefault();
var clickedID = this.id.split("-"); //Split string (Split works as PHP explode)
var DbNumberID = clickedID[1]; //and get number from array
var myData = 'id='+DbNumberID+'&jd='+$("#jd-"+DbNumberID).val(); //build a post data structure
alert(myData);
jQuery.ajax({
type: "POST", // HTTP method POST or GET
url: "<?php echo BASE_URL."programs/EditJobDescription.php"; ?>", //Where to make Ajax calls
data:myData, //post variables
success:function(response){
//on success, hide element user wants to delete.
<?php
$getJD = $emp->getJD($_SESSION['UEmpID']);
$jdValue = $getJD;
?>
var tr = $(this).parent().parent();
var new_row = '<tr id="<?php echo $itemk_id; ?>"><td><?php echo $jdValue; ?></td><td><a href="#" class="edit_buttonk" id="<?php echo $editk_id; ?>" >Edit</a> | <a href="#" class="del_buttonk" id="<?php echo $delk_id; ?>">Delete</a></td></tr>';
tr.replaceWith(new_row);
$('#<?php echo $itemk_id; ?>').empty();
$('#<?php echo $itemk_id; ?>').append(new_row);
$('#<?php echo $itemk_id; ?>').replaceWith(new_row);
},
error:function (xhr, ajaxOptions, thrownError){
//On error, we alert user
alert(thrownError);
}
});
});
//##### Delete record when delete Button is clicked #########
$("body").on("click", ".del_buttonk", function(e) {
e.preventDefault();
var clickedID = this.id.split("-"); //Split string (Split works as PHP explode)
var DbNumberID = clickedID[1]; //and get number from array
var myData = 'id='+ DbNumberID; //build a post data structure
alert(myData);
jQuery.ajax({
type: "POST", // HTTP method POST or GET
url: "<?php echo BASE_URL."programs/DeleteJobDescription.php"; ?>", //Where to make Ajax calls
data:myData, //post variables
success:function(response){
//on success, hide element user wants to delete.
$('#itemk_'+DbNumberID).fadeOut("slow");
},
error:function (xhr, ajaxOptions, thrownError){
//On error, we alert user
alert(thrownError);
}
});
});
一切正常，除了通过单击编辑链接替换表的特定行之后，当我单击保存编辑的字段时没有任何反应。我想显示表格的原始显示但已编辑。
有人有什么想法吗？