jquery实现文本点击修改
直接点击文本进行修改的方式是比较快捷的,而且挺好用的,分享下,先看下效果:
页面简单表示的代码为:(这个无关紧要)
<table class="tablefirst" id="radioSub"> <col style="width:5%"/> <col style="width:5%"/> <col style="width:10%"/> <col style="width:11%"/> <col style="width:10%"/> <col style="width:11%"/> <col style="width:20%"/> <tr> <th></th><th>序号</th><th>样卷名称</th><th>出卷时间</th><th>出卷老师</th><th>所属课程</th><th>基本操作</th> </tr> <#if samplesList?exists> <#list samplesList as samp> <tr> <td><input type="checkbox" name="id" value="${samp.sampleId}"/></td> <td>${samp_index+1}</td> <td id = "sampleName" name = "sampleName" value = "${samp.sampleId}">${samp.sampleName}</td> <td>${samp.sampleTime}</td> <td>${samp.admin.adminName}</td> <td>${samp.course.courseName}</td> <td> <span class="details" onclick="showAddBatchSub('${samp.sampleId}', 'showPaperInforAction.action')">查看样卷题型</span> </td> </tr> </#list> </#if> </table>
下面是js代码:下面默认是在页面加载时对所有的td都绑定点击事件,这个可以根据自己的需要进行修改
<script type="text/javascript" language="javascript"> //在页面装载时,让所有的td都拥有点击事件 $(document).ready(function(){ //找到所有td节点 var tds = $("td"); //var tds = $("#sampleName"); //var tds = document.getElementsByName('sampleName'); //alert(tds); //给所有的td节点增加点击事件 tds.click(tdclick); }); function tdclick(){ var clickfunction = this; //0,获取当前的td节点 var td = $(this); //获取id var sampleId = $(this).val(); //alert(id); //1,取出当前td中的文本内容保存起来 var text = $(this).text(); //2,清空td里边内同 td.html(""); //3,建立一个文本框,也就是建一个input节点 var input = $("<input>"); //4,设置文本框中值是保存起来的文本内容 input.attr("value",text); //4.5让文本框可以相应键盘按下的事件 input.keyup(function(event){ //记牌器当前用户按下的键值 var myEvent = event || window.event;//获取不同浏览器中的event对象 var kcode = myEvent.keyCode; //判断是否是回车键按下 if(kcode == 13){ var inputnode = $(this); //获取当前文本框的内容 var inputext = inputnode.val(); //清空td里边的内容,然后将内容填充到里边 var tdNode = inputnode.parent(); tdNode.html(inputext); //让td重新拥有点击事件 tdNode.click(tdclick); if(inputext != text){ //只有当内容不一样时才进行保存 //调用该方法与后台交互 sampleNameUpdate(sampleId, inputext, 'sampleAlterAction.action'); } } }); //5,把文本框加入到td里边去 td.append(input); //5.5让文本框里边的文章被高亮选中 //需要将jquery的对象转换成dom对象 var inputdom = input.get(0); inputdom.select(); //6,需要清楚td上的点击事件 td.unbind("click"); } </script>
交互的ajax
//样卷名字的修改
function sampleNameUpdate(id, content, tagAction){
//alert(id+content+tagAction);
$.ajax({
url:tagAction,
data:{
sendTime:(new Date()).getTime(),
sampleName:content,
tagId: id
},
type:'post',
async:false,
dataType:'json',
success:function(data){
if(data.success){
alert("修改成功");
}else{
alert("修改失败!");
}
}
});
}
希望多多交流,多多关注,共同成就梦想