To implement editable table functions, we will address the following issues:
1. Identify the columns in the table where the data to be modified is found (how to find the cells);
2. How to make cells can be edited;
3. How to handle some key events in a cell;
4. Resolve Cross-browser issues.
We can work through jquery to solve these problems step-by-step.
First, draw the table
First, let's draw a table first.
Code1:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>jquery cross-browser editable tables </title>
<link rel= "stylesheet" type= "Text/css" href= "Css/edittable.css" media= "All"/>
<script type= "Text/javascript" src= "Js/jquery-1.3.2.min.js" ></script>
<script type= "Text/javascript" src= "Js/edittable.js" ></script>
<body>
<table>
<thead>
<tr>
<th colspan= "2" > Mouse click on the table can be edited </th>
</tr>
</thead>
<tbody>
<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>
After you draw the table, you will see the following diagram:
Edittable01.jpg
Obviously it doesn't look like a table, it has no borders, and it's ugly. So let's set some style for this table first.
Code2:
Copy Code code as follows:
body{}{
font-size:14px;
}
table{}{
Color: #4F6B72;
border:1px solid #C1DAD7;
Border-collapse:collapse;
width:400px;
}
th{}{
width:50%;
border:1px solid #C1DAD7;
}
td{}{
width:50%;
border:1px solid #C1DAD7;
}
Now the effect is much better:
Edittable02.jpg
However, there are overlapping borders between cells and cells, and you can remove duplicate borders by simply adding such a property to the label selector table:
Border-collapse:collapse;
Copy Code code as follows:
table{}{
Color: #4F6B72;
border:1px solid #C1DAD7;
Border-collapse:collapse;
width:400px;
}
Edittable03.jpg
Second, make the table cells into editable columns
After drawing the table, we select the numbered columns in the table as editable columns. To make the cells in this column editable, insert a text box in those columns, and we insert the text box through the onclick event for that column of cells.
CODE3:
Copy Code code as follows:
$ (document). Ready (function () {
Find all cells in this column of the school number
Because the number of cells in this column in all TD position is even (0,2,4,6), so through even can be filtered to the TD in the even-digit cell
var NUMTD = $ ("tbody Td:even");
When you click These TD, create a text box
Numtd.click (function () {
Create a text box object
var inputobj = $ ("<input type= ' text ' >");
Gets the currently clicked Cell object
var tdobj = $ (this);
Border to remove text boxes
Inputobj.css ("Border", "0");
Keep text boxes and cells in the same width
Inputobj.width (Tdobj.width ());
Make the text box the same as the font size of the cell
Inputobj.css ("Font-size", Tdobj.css ("font-size"));
Keep text boxes and cells in the same font
Inputobj.css ("font-family", Tdobj.css ("font-family"));
Keep the text box and cell background consistent
Inputobj.css ("Background-color", Tdobj.css ("Background-color"));
Appendto method to add a text box to the TD
Inputobj.appendto (Tdobj);
});
});
Now you've inserted the text box into the cell. Now that you want to edit the text box, the text box should have a value, the value of the text box comes from the data in the cell, and we want to empty the data in the cell.
CODE4:
Copy Code code as follows:
$ (document). Ready (function () {
Find all cells in this column of the school number
Because the number of cells in this column in all TD position is even (0,2,4,6), so through even can be filtered to the TD in the even-digit cell
var NUMTD = $ ("tbody Td:even");
When you click These TD, create a text box
Numtd.click (function () {
Create a text box object
var inputobj = $ ("<input type= ' text ' >");
Gets the currently clicked Cell object
var tdobj = $ (this);
Get text in a cell
var text = tdobj.html ();
Empty the text of a cell
Tdobj.html ("");
Border to remove text boxes
Inputobj.css ("Border", "0");
Keep text boxes and cells in the same width
Inputobj.width (Tdobj.width ());
Make the text box the same as the font size of the cell
Inputobj.css ("Font-size", Tdobj.css ("font-size"));
Keep text boxes and cells in the same font
Inputobj.css ("font-family", Tdobj.css ("font-family"));
Keep the text box and cell background consistent
Inputobj.css ("Background-color", Tdobj.css ("Background-color"));
INPUTOBJ.CSS ("Color", "#C75F3E");
Assign a value to a text box
Inputobj.val (text);
Appendto method to add a text box to the TD
Inputobj.appendto (Tdobj);
});
});
But the above code looks very cumbersome, and jquery has a very good advantage, is its code consonant. The above code can be simplified by consonant:
CODE5:
Copy Code code as follows:
$ (document). Ready (function () {
Find all cells in this column of the school number
Because the number of cells in this column in all TD position is even (0,2,4,6), so through even can be filtered to the TD in the even-digit cell
var NUMTD = $ ("tbody Td:even");
When you click These TD, create a text box
Numtd.click (function () {
Create a text box object
var inputobj = $ ("<input type= ' text ' >");
Gets the currently clicked Cell object
var tdobj = $ (this);
Get text in a cell
var text = tdobj.html ();
Empty the text of a cell
Tdobj.html ("");
Inputobj.css ("Border", "0")
. CSS ("Font-size", Tdobj.css ("Font-size"))
. CSS ("font-family", Tdobj.css ("font-family"))
. CSS ("Background-color", Tdobj.css ("Background-color"))
. CSS ("Color", "#C75F3E")
. Width (tdobj.width ())
. val (text)
. Appendto (Tdobj);
});
});
Now that the table has been successfully inserted into the text box, you can edit the cell.
Edittable04.jpg
But there's an obviousBugs,When you click the same cell again, the following effects occur:
Edittable05.jpg
What is the cause of the above bug? Because when you insert a cell in a text box, the text box is in the cell, and when we click the text box, it also triggers the cell click event.
We need to block the click behavior of the text box (block event bubbling).
Code6:
Copy Code code as follows:
Inputobj.click (function () {
return false;
});
But when you click on the cell's border, the bug is still there, so let's make the following judgment: If the cell has already inserted a text box, jump out of the click event.
Code7:
Copy Code code as follows:
$ (document). Ready (function () {
Find all cells in this column of the school number
Because the number of cells in this column in all TD position is even (0,2,4,6), so through even can be filtered to the TD in the even-digit cell
var NUMTD = $ ("tbody Td:even");
When you click These TD, create a text box
Numtd.click (function () {
Create a text box object
var inputobj = $ ("<input type= ' text ' >");
Gets the currently clicked Cell object
var tdobj = $ (this);
Get text in a cell
var text = tdobj.html ();
If there is a text box in the current cell, jump right out of the method
Note: Be sure to make a decision before inserting a text box
if (Tdobj.children ("input"). Length>0) {
return false;
}
Empty the text of a cell
Tdobj.html ("");
Inputobj.css ("Border", "0")
. CSS ("Font-size", Tdobj.css ("Font-size"))
. CSS ("font-family", Tdobj.css ("font-family"))
. CSS ("Background-color", Tdobj.css ("Background-color"))
. CSS ("Color", "#C75F3E")
. Width (tdobj.width ())
. val (text)
. Appendto (Tdobj);
Inputobj.get (0). Select ();
Block Click events for text boxes
Inputobj.click (function () {
return false;
});
});
});
The bug was solved, but I found that when I clicked on the cell, though the text was colored from the surface, it didn't make me think it could be edited. So I'm going to make a little change. When inserting a text box, select the text of the text box.
Code 8:
Copy Code code as follows:
Inputobj.get (0). Select ();
But the problem is, in Safari Explorer, to make the text box selected, you must appear to have the text box focus. And we're just here. When you click on a cell, insert a text box and assign a value to the text box, and the text box does not have the focus. WORKAROUND: Trigger an event through the trigger method of jquery.
Code9:
Copy Code code as follows:
Inputobj.trigger ("Focus"). Trigger ("select");
Third, text box key event handling
All of these problems are solved, then we'll add some key events to the text box. We know that the keycode of getting keystrokes in different browsers is different, but jquery helps us solve the problem.
You only need to add the event parameter to the function of the incident, and then in the method body, you can get the Keycode,event.which property by using the which property of the events object to assimilate the methods of obtaining keycode by different browsers.
After getting keycode, I mainly do two key events: ESC (key value: 27) and enter key (key value: 13).
Code10:
Copy Code code as follows:
Work with the return and ESC keys on a text box
The function of an event method in jquery can define an event parameter, and jquery will mask the differences of browsers and pass us an event object that is available
Inputobj.keyup (function (event) {
Gets the key value of the current key
jquery's Event object has a which property to get the key value of the keyboard key
var keycode = Event.which;
Handling of carriage returns
if (keycode==13) {
Gets the contents of the current text box
var Inputtext = $ (this). Val ();
Modify the contents of TD to the contents of the text box
Tdobj.html (Inputtext);
}
Handling the ESC situation
if (keycode = = 27) {
Restore content in TD to text
tdobj.html (text);
}
});
Here is the complete JS code:
CODE11:
Copy Code code as follows:
$ (document). Ready (function () {
Find all cells in this column of the school number
Because the number of cells in this column in all TD position is even (0,2,4,6), so through even can be filtered to the TD in the even-digit cell
var NUMTD = $ ("tbody Td:even");
When you click These TD, create a text box
Numtd.click (function () {
Create a text box object
var inputobj = $ ("<input type= ' text ' >");
Gets the currently clicked Cell object
var tdobj = $ (this);
Get text in a cell
var text = tdobj.html ();
If there is a text box in the current cell, jump right out of the method
Note: Be sure to make a decision before inserting a text box
if (Tdobj.children ("input"). Length>0) {
return false;
}
Empty the text of a cell
Tdobj.html ("");
Inputobj.css ("Border", "0")
. CSS ("Font-size", Tdobj.css ("Font-size"))
. CSS ("font-family", Tdobj.css ("font-family"))
. CSS ("Background-color", Tdobj.css ("Background-color"))
. CSS ("Color", "#C75F3E")
. Width (tdobj.width ())
. val (text)
. Appendto (Tdobj);
Inputobj.get (0). Select ();
Block Click events for text boxes
Inputobj.click (function () {
return false;
});
Work with the return and ESC keys on a text box
The function of an event method in jquery can define an event parameter, and jquery will mask the differences of browsers and pass us an event object that is available
Inputobj.keyup (function (event) {
Gets the key value of the current key
jquery's Event object has a which property to get the key value of the keyboard key
var keycode = Event.which;
Handling of carriage returns
if (keycode==13) {
Gets the contents of the current text box
var Inputtext = $ (this). Val ();
Modify the contents of TD to the contents of the text box
Tdobj.html (Inputtext);
}
Handling the ESC situation
if (keycode = = 27) {
Restore content in TD to text
tdobj.html (text);
}
});
});
});
Related Documents package download
