表格点击修改内容"/>
jQuery表格点击修改内容
> js代码中包含的jquery下载地址：[jQury插件下载地址](/)<!DOCTYPE html>
<html>
<head><title>JQuery示例：可以编辑的表格</title>
</head>
<body><script type="text/javascript" src="/static/js/jquery-3.5.0.min.js"></script><script type="text/javascript">$(function() {//找到所有的td节点var tds = $("td");//给所有的td添加点击事件tds.click(function() {//获得当前点击的对象var td = $(this);//取出当前td的文本内容保存起来var oldText = td.text();//建立一个文本框，设置文本框的值为保存的值var input = $("<input type='text' value='" + oldText + "'/>");//将当前td对象内容设置为inputtd.html(input);//设置文本框的点击事件失效input.click(function() {return false;});//设置文本框的样式input.css("border-width", "0");input.css("font-size", "16px");input.css("text-align", "center");//设置文本框宽度等于td的宽度input.width(td.width());//设置文本框高度等于td的高度input.height(td.height());//当文本框得到焦点时触发全选事件input.trigger("focus").trigger("select");//当文本框失去焦点时重新变为文本input.blur(function() {var input_blur = $(this);//保存当前文本框的内容var newText = input_blur.val();td.html(newText);});//响应键盘事件input.keyup(function(event) {// 获取键值var keyEvent = event || window.event;var key = keyEvent.keyCode;//获得当前对象var input_blur = $(this);switch (key){case 13://按下回车键，保存当前文本框的内容var newText = input_blur.val();td.html(newText);break;case 27://按下 esc键，取消修改，把文本框变成文本td.html(oldText);break;}});});});</script><style>button{width: 50px;height: 30px;}*{padding: 0;margin: 0;}table ,td ,th {border:1px black solid;border-collapse: collapse;/*设置边框*/}table{width: 400px;margin:10px auto;}th,td{width: 100px;height: 50px;text-align: center;}
</style>
<table><tr><td>ID</td><td>姓名</td><td>班级</td><td>性别</td></tr><tr><td>1</td><td>秦浩</td><td>3年级</td><td>男</td></tr>
</table>
</body>
</html>
更多推荐
jQuery表格点击修改内容
发布评论