A new day has begun, life will continue, today to share with you is not the same table, ordinary table for the display of data, the table to be shared today not only can display data, but also the data can be edited, when the mouse clicks on the data corresponding to the data grid becomes editable state, Nonsense not much to say, into today's topic, first complete the HTML page:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>JQueryProject1</title>
<meta name= "Author" content= "Frank_ren"/>
<link type= "Text/css" rel= "stylesheet" href= "Css/mycss.css"/>
<script type= "Text/javascript" src= "Js/jquery-1.8.1.min.js" ></script>
<script type= "Text/javascript" language= "JavaScript" src= "Js/myjsfile.js" ></script>
<!--date:2012-09-17-->
<body>
<table>
<thead>
<tr>
<th colspan= "2" > mouse click the following content can be edited </th>
</tr>
</thead>
<tbody id= "Content" >
<tr>
<th> School Number </th>
<th> name </th>
</tr>
<tr>
<td>000001</td>
<td> John </td>
</tr>
<tr>
<td>000002</td>
<td> Dick </td>
</tr>
<tr>
<td>000003</td>
<td> Harry </td>
</tr>
<tr>
<td>000004</td>
<td> Zhao Liu </td>
</tr>
</tbody>
</table>
</body>
Right now it's still a normal table, not even a single style, to make this table look less abstract, and then introduce a CSS style for it
Copy Code code as follows:
table{
width:400px;
height:150px;
}
Table, table TD, Table th{
BORDER:1PX solid black;
Border-collapse:collapse;
}
Table td{
width:50%;
height:25px;
}
Thead th{
Background-color: #87CEFA;
}
Tbody th{
Background-color: #FFFACD;
}
There are only a few editable page elements in an HTML page, unfortunately table is not one of them, in order for the table to become editable, it is necessary to insert editable page elements into the table, and then decorate it with CSS to make it look like a normal table, However, it has the ability to edit, this is JS to complete the function, JS code is as follows:
Copy Code code as follows:
$ (function () {
var content;
$ ("#content tr:odd"). CSS ("Background-color", "#D2B48C");
$ ("#content Tr:even"). CSS ("Background-color", "#C0C0C0");
$ ("#content TD"). Click (function () {
var clickobj = $ (this);
Content = clickobj.html ();
Changetoedit (Clickobj);
});
function Changetoedit (node) {
Node.html ("");
var inputobj = $ ("<input type= ' text '/>");
Inputobj.css ("Border", "0"). CSS ("Background-color", Node.css ("Background-color")
. CSS ("Font-size", Node.css ("Font-size")). CSS ("height", "20px")
. CSS ("width", node.css ("width")). Val (content). Appendto (node)
. Get (0). Select ();
Inputobj.click (function () {
return false;
}). KeyUp (function (event) {
var keyvalue = Event.which;
if (keyvalue==13) {
Node.html (Node.children ("input"). Val ());
}
if (keyvalue==27) {
node.html (content);
}
}). blur (function () {
if (Node.children ("input"). Val ()!=content) {
if (confirm) (Do you want to save the modified content?) "," Yes "," No ") {
Node.html (Node.children ("input"). Val ());
}else{
node.html (content);
}
}else{
node.html (content);
}
});
}
});
Next to this JS to do a simple analysis, the global variable var content is used to save the contents of the table before editing, sometimes the user to edit the table but do not want to save the edited results, you need to restore the contents of the table before the edit, So when the mouse clicks first to save the contents of the table.
The following two sentences $ ("#content tr:odd"). CSS ("Background-color", "#D2B48C"); $ ("#content Tr:even"). CSS ("Background-color", "#C0C0C0"); is to allow the table to color interlacing, just to increase the visibility of the table. var inputobj = $ ("<input type= ' text '/>"); This sentence generates an editable jquery object, which is the editable element to insert into the table, and the following string. The CSS () method is to append a CSS style to the Inputobj object, and the. css () method can not only set CSS styles for an object, but also get a CSS style for an object. Many of these methods are available in jquery. Many times the jquery method is returned after the implementation of the JQuery object, so there is inputobj.css (). CSS (). CSS (). This way of writing.
The Appendto () method enables the table to be editable (or appendix ()), inserting editable elements into the table.. get (0). Select () The two methods are to select the contents of the inputobj so that the focus falls on the editable element. Note that the two methods must be written after Appendto (), Inputobj.click (function () {}) This method is also essential, delete this method will have a very interesting bug, you can try.
Immediately following the KeyUp (function (event) {}), you can get the key value of the keyboard pressed by Event.which, the commonly used key value has enter key: 13, ESC key: 27, when the user presses the ENTER key, save the edited content, and restores the table to a normal table, restores the contents of the table when the user presses the ESC key, and restores the table to a normal table.
User experience, the emergence of Apple so that the word more deeply rooted, here also gathered a lively. To improve the user experience here, the blur (function () {}) method is added, and when the focus leaves the editable element, it first determines whether the contents of the table are changed, and if there is no change, the immediate restoration of the table and the table, if any change prompts the user whether to save.
Today's example is basically completed, if you put the JS code in a separate JS file reference, there may be a Chinese garbled bug, may wish to try. Thank you for your patience to read this article, I hope it will help you.
