jquery可编辑表格 -

yuming.xiao

浏览: 19780 次
性别:
来自: 宁波

最近访客更多访客>>

zhaoas01

45820894

herb_16

ITMI

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jquery可编辑表格

博客分类：

javascript

jQuery JavaScript QQ HTML XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	td{
		border:1px solid #CCC;
		font-size:14px;
	}

</style>
<script src="../scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
//实现表格可编辑
	$(document).ready(function(){
			//取出所有的单元格,除第一行的菜单以外
			var tds=$("tr:gt(0) td");
			//alert(tds.length);
			//给每个单元格注册一个单击事件
			tds.click(tdClick);
	
	});
	
	function tdClick(){
				//得到该单元格的对象
				var td=$(this);
				//取出改单元格的内容
				var tdText=td.text();
				//alert(tdText);	
				//清空改单元格内容
				td.empty();//或者td.html("");也可以
				//创建一个input文本框
				var input=$("<input>");
				//将原来的值赋值给input文本框
				input.attr("value",tdText);
				//给文本框注册一个keyup事件
				input.keyup(function(event){
					 var myevent=event||window.event;
					//判断是否是回车键安县
					if(myevent.keyCode==13){
						//将当前输入的信息保存下来
						var inputnode=$(this);
						//文本框的值
						var inputText=inputnode.val();
						//清空改td中的内容
						var mytd=inputnode.parent();
						mytd.empty();
						//将文本框值赋给td
						mytd.html(inputText);	
						//让td重新拥有单击事件
						mytd.click(tdClick);	
					}
				});
				input.blur(function(){
					var mytd=$(this).parent();
					var inputText=$(this).val();
					mytd.empty();
					mytd.html(inputText);
					mytd.click(tdClick);
				});
				//将文本框追加给单元格
				td.append(input);
				//文本框高亮选中
				var inputdom=input.get(0);
				inputdom.select();
				
				//td.html(input.val());
				//一处该单元格的单击事件
				td.unbind("click");
				
		
	};
</script>
</head>

<body>
<table width="691" style="text-align:center; width:1000px; border:1px solid #CCC; border-collapse:collapse;">
	<tr>
    	<td width="63">姓名</td>
        <td width="42">年龄</td>
        <td width="42">性别</td>
        <td width="354">地址</td>
        <td width="213">电话</td>
        <td width="258">邮箱</td>    	
    </tr>
    <tr>
    	<td>张三</td>
        <td>14</td>
        <td>男</td>
        <td>宁波市苍松路55号</td>
        <td>13599887676</td>
        <td>sanzhang@163.com</td>    	
    </tr>
     <tr>
    	<td>李四</td>
        <td>16</td>
        <td>男</td>
        <td>宁波市海曙区解放南路15号</td>
        <td>13199887646</td>
        <td>sili@qq.com</td>    	
    </tr>
     <tr>
    	<td>王五</td>
        <td>24</td>
        <td>男</td>
        <td>宁波市海曙区鄞奉路55号</td>
        <td>13899887672</td>
        <td>wuwang@163.com</td>    	
    </tr>
     <tr>
    	<td>张婷婷</td>
        <td>18</td>
        <td>女</td>
        <td>宁波市海曙区环城西路45号</td>
        <td>13199887226</td>
        <td>tingting@163.com</td>    	
    </tr>
</table>
</body>
</html>

分享到：