<%@ page language="java" pageEncoding="gbk"%> <% 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> <title>Jquery Test</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"> <mce:script type="text/javascript" src="js/jquery.js" mce_src="js/jquery.js"></mce:script> <mce:style type="text/css"><!-- table{ border:black 1px solid; border-collapse:collapse; width:400px; } table td { border:black 1px solid; width:50%; } table th { border:black 1px solid; } tbody th { background-color:#A3BAE9; } --></mce:style><style type="text/css" mce_bogus="1"> table{ border:black 1px solid; border-collapse:collapse; width:400px; } table td { border:black 1px solid; width:50%; } table th { border:black 1px solid; } tbody th { background-color:#A3BAE9; } </style> <mce:script type="text/javascript"><!-- $(function() { //给相应的tr加上背景 $("tbody tr:even").css("background-color","#ECE9D8"); //获取第一列 var numTD=$("tbody td:even"); numTD.click(function() { var tdObj=$(this); if(tdObj.children("input").length>0) { return false; } //create a node of textbox var inputObj = $("<input type='text'>"); inputObj.css("border-width","0").css("font-size","16px"); //insert a textbox,find the current td inputObj.width(tdObj.width()); inputObj.css("background-color",tdObj.css("background-color")); //get the current content of td into textbox inputObj.val($.trim(tdObj.html())); var temp=$.trim(inputObj.val()); tdObj.html(""); inputObj.appendTo(tdObj); inputObj.trigger("focus"); inputObj.click(function() { return false; }); inputObj.keyup(function(event){ var keycode=event.which; if(keycode==13) { var inputtext=$(this).val(); tdObj.html(inputtext); } if(keycode==27) { tdObj.html(temp); } }); }); }); // --></mce:script> </head> <body> <table> <thead> <tr> <th colspan=2> Chick it and change it! </th> </tr> </thead> <tbody> <tr> <th> 学号 </th> <th> 姓名 </th> </tr> <tr> <td> 0613410227 </td> <td> Jack Zhang </td> </tr> <tr> <td> 0613411234 </td> <td> Man Lee </td> </tr> <tr> <td> 0613411234 </td> <td> Man Lee </td> </tr> </tbody> </table> </body> </html>