Implement an editable table Demo:
Instance diagram:
Code:
Copy code The 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 runat = "server">
<Title> </title>
<SCRIPT type = "text/JScript" src = "jquery-1.4.2.min.js"> </SCRIPT>
<SCRIPT type = "text/JScript" Language = "JavaScript">
// Simplified ready Syntax: called when page loading is complete
$ (Function (){
// Set the background color of the even tr in the tbody to # ece9d8
$ ("Tbody TR: Even" ).css ("background-color", "# ece9d8 ");
// Set the even TD in the tbody to numtd
VaR numtd = $ ("tbody TD: Even ");
// Register mouse clicks for these cells
Numtd. Click (function (){
// Obtain the jquery object of the clicked element.
VaR tdobj = $ (this );
// If the clicked element contains the input control, click is not executed.
If (tdobj. Children ("input"). length> 0 ){
Return false;
}
// Add the content of TD to text
VaR text = tdobj.html ();
// Clear content in TD
Tdobj.html ("");
// Create a text box, remove the border of the text box, and set the text font size in the text box to 16 PX
// Make the text box width the same as the width of TD, set the background color of the text box, you need to put the content of the current TD in the text box
// Insert the text box to TD
VaR inputobj = $ ("<input type = 'text'>" Fig ("border-width", "0 ")
. CSS ("font-size", "16px"). Width (tdobj. Width ())
. CSS ("background-color", tdobj.css ("background-color "))
. Val (text). appendto (tdobj );
// Set the trigger to trigger the focus event first and then the select event.
Inputobj. Trigger ("Focus"). Trigger ("select ");
// It is selected after the text box is inserted.
Inputobj. Click (function (){
Return false;
});
// Register the keyup event
Inputobj. keyup (function (event ){
// Obtain the key value of the currently pressed keyboard
VaR keycode = event. Which;
// Handle the carriage return status
If (keycode = 13 ){
// Obtain the content in 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 );
}
});
});
});
</SCRIPT>
<Style type = "text/CSS">
Table
{
Border: 1px solid black;
Border-collapse: collapse;
Width: 400px;
}
Table TD
{
Border: 1px solid black;
Width: 50%;
}
Table th
{
Border: 1px solid black;
Width: 50%;
}
Tbody th
{
Background-color: # a3bae9;
}
</Style>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<Table>
<Thead>
<Tr>
<TH colspan = "2">
Click the table item to edit it.
</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<TH>
Student ID
</Th>
<TH>
Name
</Th>
</Tr>
<Tr>
<TD>
000001
</TD>
<TD>
Zhang San
</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>
</Form>
</Body>
</Html>
Knowledge point:
1. $ (function () {}) is short for $ (document). Ready (function.
2. In $ ("tbody TD: Even"), ":" indicates filtering. The even is an even number function. The filtering conditions can be found in the selector of the help document. Returns the even TD in the tbody. The result is a set.
3. In the event $ (this) will return the jquery object of this control.
4. Children ("input") indicates getting all jquery objects whose child elements contain input. The result is a set.
5. CSS ("border-width", "0") indicates setting the CSS attribute value.
6. Trigger ("Focus"). Trigger ("select") indicates that the focus event is triggered first and then the select event is triggered.
7. keyup (function (event) {var keycode = event. Which;}) indicates registration of keyboard events. The which attribute of the event parameter stores keyboard information.
