jquery学习之可编辑的单元格

zhq426 · 发表于 2013-2-7 16:49:22

第一千零三十六章考验
html代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>jquery-EditTable.jsp</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/edittable.css"><script type="text/javascript" src="../js/jquery.js"></script><script type="text/javascript" src="../js/edittable.js"></script> </head> <body> <table> <thead> <tr> <th colspan="2">鼠标点击可以编辑表格</th> </tr> </thead> <tbody> <tr> <th>姓名</th> <th>学号</th> </tr> <tr> <td>123</td> <td>张三</td> </tr> <tr> <td>456</td> <td>李四</td> </tr> <tr> <td>456</td> <td>王五</td> </tr> <tr> <td>456</td> <td>赵六</td> </tr> </tbody> </table> </body></html>
JS

$(function(){$("tbody tr:even").css("background-color","#369456");var numTd=$("tbody td:even");numTd.click(function(){var tdObj=$(this);if(tdObj.children("input").length>0){return false;}var text=tdObj.html();var inputObj=$("<input type='text' />");inputObj.css("border-width","0");inputObj.css("font-size","16px");inputObj.width(tdObj.width());inputObj.val(tdObj.html());inputObj.css("background-color",tdObj.css("background-color"));tdObj.html("");inputObj.appendTo(tdObj);//inputObj.get(0).select();inputObj.trigger("focus").trigger("select");inputObj.click(function(){return false;});inputObj.keyup(function(event){var keycode=event.which;if(keycode==13){var inputValue=$(this).val();tdObj.html(inputValue);}if(keycode==27){tdObj.html(text);}});});}); CSS代码

@CHARSET "UTF-8";table{border:1px solid black;border-collapse:collapse;width:400px;}table td{border:1px solid black;width:50%;}table th{border:1px solid black;width:50%;}tbody th{background-color:#EbbbbE;}

		自动登录	找回密码
密码			立即注册

jquery学习之 可编辑的单元格

浏览过的版块

jquery学习之可编辑的单元格