jquery做的修改表格的例子

最新推荐文章于 2022-07-19 09:15:01 发布

langhua9527

最新推荐文章于 2022-07-19 09:15:01 发布

阅读量295

点赞数

分类专栏： AJAX 文章标签： jQuery HTML JSP 浏览器 ViewUI

AJAX 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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");
}