Home>

The final effect we want to achieve is as follows:

When you click on the student number column,Can be edited:

When you click esc, the operation is canceled,When you hit enter,Changes take effect (no interaction with the background)

The page code is as follows (asp.net):

<%@page language="c#" autoeventwireup="true" codefile="edittable.aspx.cs" inherits="edittable"%>
<! 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 runat="server">
 <title></title>
 <link href="css/eidttable.css" rel="stylesheet" type="text/css" />
 <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
 <script src="js/eidttable.js" type="text/javascript"></script>
</head>
<body>
 <form runat="server">
 <div>
 <table>
 <thead>
 <tr>
 <th colspan="2">Editable table</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <th>Student ID</th>
 <th>name</th>
 </tr>
 <tr>
 <td>00001</td>
 <td>Xiaoming</td>
 </tr>
 <tr>
 <td>00001</td>
 <td>Xiaoming</td>
 </tr>
 <tr>
 <td>00001</td>
 <td>Xiaoming</td>
 </tr>
 <tr>
 <td>00001</td>
 <td>Xiaoming</td>
 </tr>
 </tbody>
 </table>
 </div>
 </form>
</body>
</html>

css (eidttable.css)

table
{
 border:1px solid black;
 border-collapse:collapse;
 width:500px;
 }
table th
{
 border:1px solid black;
 width:50%;
 }
table td
{
 border:1px solid black;
 width:50px;
 }
tbody th
{
 background-color:#a3bae9
 }

js (eidttable.js):

///<reference path="jquery-1.9.1.min.js" />
//$(document).ready(function () {
//alert ("test");
//});
//Easy writing
$(function () {
 $("tr:odd"). css ("background-color", "#ece9d8");
 var objtd=$(". edittd");
 objtd.click (function () {
 var text=$(this) .html ();
 var objthistd=$(this);
 //Solve the problem when clicking the gap between the text box and td
 if (objthistd.children ("input"). length>0) {
 return false;
 }
 var inputtext=$("<input value =" test "type =" text "/>");
 inputtext.width (objtd.width ()). css ("font-size", "16px"). css ("background-color", objtd.css ("background-color")). css ("border-width "," 0 "). Val (text);
 objthistd.html ("");
 inputtext.appendto (objthistd);
 inputtext.trigger ("focus"). trigger ("select");
 inputtext.click (function () {
 return false;
 });
 //The keydown event used here, I have tried using keyup event can not block the browser's carriage return page submission event
 inputtext.keydown (function (event) {
 //alert(event.keycode);
 var keycode=event.which;
 if (keycode == 13) {
 objthistd.html ($(this) .val ());
 //return false;
 }
 if (keycode == 27) {
 objthistd.html (text);
 }
 });
 });
});
  • Previous Summary of PHP 9 big cache technology
  • Next Android option menu usage example analysis