文章目录

jquery点击文字变为input文本框可以修改无刷新保存

以php为例,在后台管理的时候,有时需要点击一篇文章的标题,然后标题变成一个input文本框,并随之会有一个保存的按钮出现,在这里可以无刷新修改其内容。

很多新上手的朋友不知道该怎么做这样的功能,今天小编就来讲讲jquery点击文字变为input文本框可以修改无刷新保存的方法。

html代码<form name="form1">
<table cellspacing="0" border="1px">
<tr class="trout">
	<tr>
        <td id="td1">
        <span onclick="showTitle('td1',1,'jquery无刷新保存功能实现');">jquery无刷新保存功能实现</span>
        </td>
    </tr>
    <tr>
        <td id="td2">
        <span onclick="showTitle('td2',2,'jquery点击变成input文本框');">jquery点击变成input文本框</span>
        </td>
    </tr>
    <tr>
        <td id="td3">
        <span onclick="showTitle('td3',3,'jquery点击显示隐藏功能的实现');">jquery点击显示隐藏功能的实现</span>
        </td>
    </tr>
</table>
</form>
javascript代码function showTitle(tdid,id,title){
	$("#"+tdid).html('<input type="text" name="title'+id+'" value="'+title+'" /><a onclick="saveAjax('+id+');">保存</a><a href="javascript:;" class="atxt" onclick="hiddenTitle(''+tdid+'','+id+',''+title+'');">取消</a>');
}
function hiddenTitle(tdid,id,title){
	$("#"+tdid).html('<span onclick="showTitle('td'+id+'','+id+',''+title+'');">'+title+'</span>');
}
function saveAjax(id){
	var params = $('form').serialize();
	var url = 'ajax.php?id='+id;
	alert(url);
	$.ajax({
		url: url,
		type: 'post',
		data: params,
		dataType:'json',
		success: function (data) {
			$('#td'+id).html(data.title);
		}
	});
}
ajax.php页面获取文本框内容,获取参数id,然后执行保存的代码,根据id进行update就大功告成了。

需要注意的是,在ajax.php页面,返回的title内容需要和之前的一样,要有如下代码:

php代码$title='<span onclick="showTitle('td'.$id.'','.$id.',''.str_replace("'","'",str_replace("&quot;","",$title)).'');">'.$title.'</span>';

jquery点击文字变为input文本框可以修改无刷新保存

上图为原始样式。

下图为无刷新修改保存样式。

jquery点击文字变为input文本框可以修改无刷新保存

以上就是jquery点击文字变为input文本框可以修改无刷新保存代码,希望对朋友们有帮助。

本文网址:http://www.santii.com/article/2.html


数据更新时间:2018-11-16