Home > Developer > JavaScript
To implement the Editable table function, we need to solve the following problems:
1. Identify the columns of the data to be modified in the table (how to find these cells );
2. How to make cells editable;
3. How to handle some cell button events;
4. Solve cross-browser problems.
We can solve the above problem step by step through jQuery.
1. Create a table
First, draw a table.
Code1:
Copy codeThe Code is as follows:
<! 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>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> jQuery cross-browser editable table </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>
</Head>
<Body>
<Table>
<Thead>
<Tr>
<Th colspan = "2"> click the table to edit it </th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Th> Student ID </th>
<Th> name </th>
</Tr>
<Tr>
<Td> 000001 </td>
<Td> JOHN </td>
</Tr>
<Tr>
<Td> 000002 </td>
<Td> Li Si </td>
</Tr>
<Tr>
<Td> 000003 </td>
<Td> Wang Wu </td>
</Tr>
<Tr>
<Td> 000004 </td>
<Td> Zhao Liu </td>
</Tr>
</Tbody>
</Table>
</Body>
</Html>
The
EditTable01.jpg
Obviously, it does not look like a table, it has no borders and is ugly. Set some styles for this table first.
Code2:
Copy codeThe Code is 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;
}
The effect is much better now:
EditTable02.jpg
However, there are overlapping borders between cells. You only need to add this attribute to the label selection character table to remove the repeated border:
Border-collapse: collapse;
Copy codeThe Code is as follows:
Table {}{
Color: #4F6B72;
Border: 1px solid # C1DAD7;
Border-collapse: collapse;
Width: 400px;
}
EditTable03.jpg
2. Convert cells in the table into editable Columns
After drawing the table, we select the number column in the table as the Editable column. To make the cells in this column editable, You need to insert a text box into these columns. We use the onclick event of the cells in this column to insert the text box.
Code3:
Copy codeThe Code is as follows:
$ (Document). ready (function (){
// Find all cells in the student ID column
// Because the position of the cell in the student ID column in all td is an even number (,), you can use even to filter the even number of cells in td.
Var numTd = $ ("tbody td: even ");
// Create a text box when you click these td
NumTd. click (function (){
// Create a text box object
Var inputobj = $ ("<input type = 'text'> ");
// Obtain the Cell Object of the current click
Var tdobj = $ (this );
// Remove the border of the text box
Inputobj.css ("border", "0 ");
// Make the text box and cell width consistent
Inputobj. width (tdobj. width ());
// Make the text box have the same font size as the cell.
Inputobj.css ("font-size", tdobj.css ("font-size "));
// Make the text box consistent with the cell font
Inputobj.css ("font-family", tdobj.css ("font-family "));
// Make the background of the text box and cell consistent
Inputobj.css ("background-color", tdobj.css ("background-color "));
// AppendTo Method Add text box to td
Inputobj. appendTo (tdobj );
});
});
The text box has been inserted into the cell. Since 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 clear the original data in the cell.
Code4:
Copy codeThe Code is as follows:
$ (Document). ready (function (){
// Find all cells in the student ID column
// Because the position of the cell in the student ID column in all td is an even number (,), you can use even to filter the even number of cells in td.
Var numTd = $ ("tbody td: even ");
// Create a text box when you click these td
NumTd. click (function (){
// Create a text box object
Var inputobj = $ ("<input type = 'text'> ");
// Obtain the Cell Object of the current click
Var tdobj = $ (this );
// Obtain the text in the cell
Var text = tdobj.html ();
// Clear the text of a cell
Tdobj.html ("");
// Remove the border of the text box
Inputobj.css ("border", "0 ");
// Make the text box and cell width consistent
Inputobj. width (tdobj. width ());
// Make the text box have the same font size as the cell.
Inputobj.css ("font-size", tdobj.css ("font-size "));
// Make the text box consistent with the cell font
Inputobj.css ("font-family", tdobj.css ("font-family "));
// Make the background of the text box and cell consistent
Inputobj.css ("background-color", tdobj.css ("background-color "));
Inputobj.css ("color", "# C75F3E ");
// Assign a value to the text box
Inputobj. val (text );
// AppendTo Method Add text box to td
Inputobj. appendTo (tdobj );
});
});
But the above Code looks very tedious. jQuery has a very good advantage, that is, its code concatenation. The above code can be simplified through concatenation:
Code5:
Copy codeThe Code is as follows:
$ (Document). ready (function (){
// Find all cells in the student ID column
// Because the position of the cell in the student ID column in all td is an even number (,), you can use even to filter the even number of cells in td.
Var numTd = $ ("tbody td: even ");
// Create a text box when you click these td
NumTd. click (function (){
// Create a text box object
Var inputobj = $ ("<input type = 'text'> ");
// Obtain the Cell Object of the current click
Var tdobj = $ (this );
// Obtain the text in the cell
Var text = tdobj.html ();
// Clear 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 the text box has been successfully inserted in the table. You can edit the cells.
EditTable04.jpg
However, there is an obvious bug. When you click the same cell again, the following results will appear:
EditTable05.jpg
What causes the above bug? After a cell is inserted in the text box, the text box belongs to the cell. When we click the text box, the click Event of the cell is also triggered.
We need to block the click behavior of the text box (to prevent event bubbles ).
Code6:
Copy codeThe Code is as follows:
Inputobj. click (function (){
Return false;
});
However, when you click the cell border, the above bug still occurs. Let's make the following judgment: if the cell has already inserted a text box, the click event will pop out.
Code7:
Copy codeThe Code is as follows:
$ (Document). ready (function (){
// Find all cells in the student ID column
// Because the position of the cell in the student ID column in all td is an even number (,), you can use even to filter the even number of cells in td.
Var numTd = $ ("tbody td: even ");
// Create a text box when you click these td
NumTd. click (function (){
// Create a text box object
Var inputobj = $ ("<input type = 'text'> ");
// Obtain the Cell Object of the current click
Var tdobj = $ (this );
// Obtain the text in the cell
Var text = tdobj.html ();
// If there is a text box in the current cell, the method jumps out directly.
// Note: Make sure to judge before inserting the text box
If (tdobj. children ("input"). length> 0 ){
Return false;
}
// Clear 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 in the text box
Inputobj. click (function (){
Return false;
});
});
});
The above bug is fixed, but I found that when I click a cell, although the text changes on the surface, it does not make me feel that it can be edited. Then I will make a few changes, insert the text box, and select the text box.
Code 8:
Copy codeThe Code is as follows:
Inputobj. get (0). select ();
However, the problem arises again. In Safari, to make the text box in the selected state, it must appear to give the text box focus. When we click a cell, we insert a text box and assign a value to the text box. The text box does not get the focus. Solution: Use the trigger method of jQuery to trigger an event.
Code9:
Copy codeThe Code is as follows:
Inputobj. trigger ("focus"). trigger ("select ");
3. Handling text box button events
After solving these problems, we will add some key events to the text box. We know that the keyCode for getting buttons in different browsers is different, but jQuery helps us solve this problem.
You only need to add the event parameter to the function of the event, and then obtain the keyCode and event through the which attribute of the event object in the method body. the which attribute Assimilation Methods used by different browsers to obtain the keyCode.
After obtaining the keyCode, I mainly perform two key events: ESC key (key value: 27) and Enter key (key value: 13 ).
Code10:
Copy codeThe Code is as follows:
// Process the operation of pressing the carriage return and esc in the text box
// The function of an event Method in jQuery can define an event parameter. jQuery will block the differences in the browser and pass it to us an available event object.
Inputobj. keyup (function (event ){
// Obtain the key value of the current button
// The jQuery event object has a which attribute to obtain the key value of the keyboard key.
Var keycode = event. which;
// Handle the carriage return status
If (keycode = 13 ){
// Obtain the content of the current text box
Var inputtext = $ (this). val ();
// Change the content of td to the content in the text box.
Tdobj.html (inputtext );
}
// Handle the esc status
If (keycode = 27 ){
// Restore the content in td to text
Tdobj.html (text );
}
});
The complete js Code is as follows:
Code11:
Copy codeThe Code is as follows:
$ (Document). ready (function (){
// Find all cells in the student ID column
// Because the position of the cell in the student ID column in all td is an even number (,), you can use even to filter the even number of cells in td.
Var numTd = $ ("tbody td: even ");
// Create a text box when you click these td
NumTd. click (function (){
// Create a text box object
Var inputobj = $ ("<input type = 'text'> ");
// Obtain the Cell Object of the current click
Var tdobj = $ (this );
// Obtain the text in the cell
Var text = tdobj.html ();
// If there is a text box in the current cell, the method jumps out directly.
// Note: Make sure to judge before inserting the text box
If (tdobj. children ("input"). length> 0 ){
Return false;
}
// Clear 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 in the text box
Inputobj. click (function (){
Return false;
});
// Process the operation of pressing the carriage return and esc in the text box
// The function of an event Method in jQuery can define an event parameter. jQuery will block the differences in the browser and pass it to us an available event object.
Inputobj. keyup (function (event ){
// Obtain the key value of the current button
// The jQuery event object has a which attribute to obtain the key value of the keyboard key.
Var keycode = event. which;
// Handle the carriage return status
If (keycode = 13 ){
// Obtain the content of the current text box
Var inputtext = $ (this). val ();
// Change the content of td to the content in the text box.
Tdobj.html (inputtext );
}
// Handle the esc status
If (keycode = 27 ){
// Restore the content in td to text
Tdobj.html (text );
}
});
});
});
Package and download Related Documents
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
