实现可编辑表格

最新推荐文章于 2024-08-28 18:40:13 发布

devin_jia

最新推荐文章于 2024-08-28 18:40:13 发布

阅读量399

点赞数

分类专栏： jquery 文章标签： stylesheet function jquery string input html

本文链接：https://blog.csdn.net/yewuqing007/article/details/6600531

版权

jquery 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

点击表格可以编辑

回车后确定

使用了jquery包

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP '表格可修改.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript" src="script/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("td").click(tdclick);
});
function tdclick(){
var tt=$(this).text();
var ww=$(this);
var input=$("<input>");
ww.empty();
//回车事件
input.keyup(function(event){
//解决不同浏览器获取事件对象差距
var myEvent=event || window.event;
//获取键值
var kcode =myEvent.keyCode;
//判断是否回车
if(kcode==13){
//获取文本内容
var ddd=$(this).val();
//清空内容
var tdnode=$(this).parent();
//将文本内容填充到td中
tdnode.html(ddd);
//让td拥有点击事件
tdnode.click(tdclick);
}
});
$(this).append(input.attr("value",tt));
//将jquery对象转换为dom对象
var inputdom=input.get(0);
inputdom.select();
$(this).unbind("click");
}
</script>
</head>

<body>
<table border="1px;">
<tr><td>dds</td><td>31232</td></tr>
</table>
</body>
</html>