jquery做的修改表格的例子
程序员文章站
2022-03-27 09:07:33
...
JSP
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JqueryEdit</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">
<link rel="stylesheet" type="text/css" href="../css/table.css">
</head>
<script type="text/javascript" src="../javascript/jquery.js"></script>
<script type="text/javascript" src="../javascript/jqueryEdit.js"></script>
<body>
<table border="1px">
<tbody>
<tr>
<td>Edit1</td>
<td>Edit2</td>
<td>Edit3</td>
</tr>
</tbody>
</table>
</body>
</html>
$(document).ready(
function(){
//找到所有的TD节点
var tds =$("td");
//注册事件
tds.click(tdclick);
}
);
function tdclick(){
//找到当前节（TD）
var td = $(this);
//获得节点文本信息
var text = $(this).text();
//td.empty()清空
td.html("");
//创建input
var input = $("<input>");
//给当前input加入事件
input.keyup(function(event){
//判断浏览器
var myEvent = event || window.event;
//获得按键的值
var kcode = myEvent.keyCode;
var inputTexts = $(this).val();
if(kcode == 13){
//获得文本的值
var inputText = $(this).val();
//获得父TD
var tdNode = $(this).parent();
//赋值
tdNode.html(inputText);
//重新添加事件
tdNode.click(tdclick);
}
if(kcode == 27){
//获得文本的值
var inputText = $(this).val();
//获得父TD
var tdNode = $(this).parent();
//赋值
tdNode.html(text);
//重新添加事件
tdNode.click(tdclick);
}
});
//设属性
input.attr("value",text);
//也可以用input.appendTo(td);
td.append(input);
//文字全部选中
input.get(0).select();
//取消点击事件
td.unbind("click");
}