关于如何将table中的td标签转换成input标签以及将修改的数据通过ajax保存服务器

本文为笔者原创转载请标明出处

这个问题很多做后端的猿们在做涉及到前端开发的项目时可能会遇到，恰好这个问题也被我遇到了。如何解决这个问题，听笔者细细道来，笔者并非什么大牛，再做这个项目的时候跳了几个坑，希望我的文章能够帮助到大家，也希望读者能指出文章中的错误。当然你要有更好的解决方案请告诉我。

废话不多说，直接上代码。

前端html中嵌入js的代码

jquery ajax的相关代码

服务器端的代码

前端html的代码

<table class="table table-striped">
<thead>
<tr>
<th>姓名</th>
<th>职务</th>
<th>职称</th>
<th>工号</th>
<th>部门</th>
</tr>
</thead>
<tbody id="jobTeacherinfo">
</tbody>
</table>

嵌入js代码：

笔者在开发这个项目时服务端用的是php语言和thinkPHP框架开发的，上边代码的意思是将数据库的数据取出显示成表格形式，arrayObj[‘19’][i][‘name’]这种形式的数据代表从数据库取出的数据。

var arrayObj ={$jsdata};
var driveLetter = document.getElementById('jobTeacherinfo').innerHTMl;
var j=1;
if(arrayObj['19'].length!=undefined){
for(var i=0;i<arrayObj['19'].length;i++){
data2[i] ='<tr><td>'+j+'</td>'+
'<td>'+arrayObj['19'][i]['name']+'</td>'+
'<td>'+arrayObj['19'][i]['status']+'</td>'+
'<td>'+arrayObj['19'][i]['title']+'</td>'+
'<td>'+arrayObj['19'][i]['no']+'</td>'+
'<td>'+arrayObj['19'][i]['dp']+'</td>'+
//隐藏域传值
'<td><input type="hidden" name="db" value="teachinfo"></td><td><button>save</button></td></tr>';
j++;
}
document.getElementById("jobTeacherinfo").innerHTML=data2.join("");
data2=null;
}

jquery ajax代码：

$(function() {
$('table td').dblclick(
function() {
if (!$(this).is('.input')) {
$(this).addClass('input').html(
'<input type="text" value="'+$(this).text()+'" />').find('input').focus().blur(
function() {                    $(this).parent().removeClass('input').html(									$(this).val() || 0);});
}
}).hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
});

$(function() {
$('button').click(function(){
//var p_nex=$(this).nextAll().andSelf();
//var p_nex=$(this).siblings('td:eq(0)').text();
var data={
//获取第一列td内的值
id:$(this).parents('tr').find('td').eq(0).text(),
//获取第二列td内的值
name: $(this).parents('tr').find('td').eq(1).text(),
status:$(this).parents('tr').find('td').eq(2).text(),
dtitle: $(this).parents('tr').find('td').eq(3).text(),
no: $(this).parents('tr').find('td').eq(4).text(),
dp: $(this).parents('tr').find('td').eq(5).text(),
//获取第一列td内隐藏域的值
type:$(this).parents('tr').children('td').children('input:hidden[name="typename"]').val(),
//获取第一列td内隐藏域的值
typete:$(this).parents('tr').children('td').children('input:hidden[name="typena"]').val(),
//获取第一列td内隐藏域的值
hiddend:$(this).parents('tr').children('td').children('input:hidden[name="db"]').val(),
};
alert(data.no);
$.ajax({
type : 'post',
url : '../Start/toAjax',
data : data,
cache : false,
dataType : 'json',
error : function(e) {
alert("提交数据失败!");
return false;
},
success : function(data) {
if (data.status == 1) {
alert((data.info));
return true;
}
if (data.status == 0) {
alert(data.info);
return false;
}
if (data.status == -1) {
alert(data.info);
return false;
}
}
});
});
});

服务器端的代码

public function toAjax(){
if (IS_AJAX){
$data= I('post.');

if ($data['hiddend']=="数据库表名") {
$temp=[
'id'=>$data['id'],
'name'=>$data['name'],
'status'=>$data['status'],
'dtitle'=>$data['dtitle'],
'no'=>$data['no'],
'dp'=>$data['dp'],
'db'=>$data['hiddend'],
'type'=>$data['type'],
'typete'=>$data['typete'],
];
$wherefind['name']=$data['no'];
$wherefind['schoolName']=$schoolName;
}
//将修改的数据保存到数据库
$re= $Util->updata($data['hiddend'], $wherefind, $temp);
if (!$re) {
$this->ajaxReturn(array(
'status' => 0,
'info' =>"数据修改失败!".implode(',',$temp)
));
}else {
$this->ajaxReturn(array(
'status' => 1,
'info' => "数据修改成功"
));
}
}
}