Use jQuery to implement editable tables

Source: Internet
Author: User

Today I learned how to use jQuery to edit a table. In this example, you can click a cell in the foreground table to modify the content. Press enter to save the modified content and esc to cancel the saved content. Principle: When you click a table cell on the client, add a text box to the cell, assign the original content to the text box, and then modify the text box content, after modification, the text box content is assigned to the cell.

Source code:

Front-end code:
Copy codeThe Code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "WebForm1.aspx. cs" Inherits = "WebApplication1.WebForm1" %>
<! DOCTYPE html
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> jq2-editable table </title>
<Link href = "css/editTable.css" rel = "stylesheet"/>
<Script type = "text/javascript" src = "js/jquery. js"> </script>
<Script type = "text/javascript" src = "js/editTable. js"> </script>
<% -- <Script type = "text/javascript" src = "js/jquery-1.9.1.js"> </script> -- %>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<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> 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>
</Div>
</Form>
</Body>
</Html>

Css code:
Copy codeThe Code is as follows:
Body {
}
Table {
Border: 1px solid #000000;
Border-collapse: collapse;/* merge cell Borders */
Width: 400px;
}
Table td {
Border: 1px solid #000000;
Width: 50%;
}
Table th {
Border: 1px solid #000000;
Width: 50%;
}
Tbody th {
Background-color: # invalid Fae;
}

Jquery code
Copy codeThe Code is as follows:
$ (Function (){
// Find all the even rows except the first tr in the table
// Use even to return all tr elements through tbody tr
$ ("Tbody tr: even" ).css ("background-color", "# ece9d8 ");
// Find all student ID Cells
Var numId = $ ("tbody td: even ");

// Register a mouse click event for a cell
NumId. click (function (){
// Find the td corresponding to the current mouse click. this corresponds to the td responding to the click
Var tdObj = $ (this );
// Determine whether there is a text box in td
If (tdObj. children ("input"). length> 0 ){
Return false;
}
// Obtain the table content
Var text = tdObj.html ();
// Clear content in td
TdObj.html ("");
// Create a text box
// Remove the border of the text box
// Set the font size in the text box to be the same as that in the table.
// Set the background color of the text box to be the same as the background color of the table.
// The width of the text box is the same as that of the td
// Add the value of td to the text box
// Insert the text box to td
Var inputObj = $ ("<input type = 'text'>" bar .css ("border-width", "0" bar .css ("font-size ", tdObj.css ("font-size" )).css ("background-color", tdObj.css ("background-color ")). width (tdObj. width ()). val (text ). appendTo (tdObj );
// After the text box is inserted, the focus is obtained first and then selected.
InputObj. trigger ("focus"). trigger ("select ")
// The click event cannot be triggered after the text box is inserted.
InputObj. click (function (){
Return false;
});
// Process the operation of pressing the carriage return and esc in the text box
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 in td to the content in the text box
TdObj.html (inputtext );
}
// Process esc content
If (keycode = 27 ){
// Restore the content in td to the original content
TdObj.html (text );
}
});
});
});

Summary: knowledge points that can be learned through this instance:

I. html

1. the table can contain thead and tbody.

2. the header content can be placed in th.

3. the syntax of table {} is called the tag selector, which can affect the entire table.

4. table td {} indicates all td contained in the table.

Ii. jquery

Four different parameters can be placed in the brackets of $ ().

1. Directly place the function parameter to indicate that the page has been loaded. For example, in the preceding example, row 1st in jquery code $ (function (){})

2. parameters can be css class selectors and packaged into a jquery object. For example, in the preceding example, line 4th of jquery code $ ("tbody tr: even ")

3. If the parameter is html text, you can create a dom node and wrap it into a jquery object. For example, in the preceding example, line 27th of jquery code $ ("<input type = 'text'> ")

4. The parameter can be a dom object. This method is equivalent to replacing the dom object with a jquery object. In the above example, the 11th line var tdObj of jquery code =$ (this)

Jquery object in this example

1. css attributes are added to the jquery object to set the css attributes of the node. For example, line 4th in the jquery code in the above example ("tbody tr: even" ).css ("background-color", "# ece9d8 ");

2. The jquery object contains the dom node corresponding to the selector, Which is saved as an array.

3. Add the html method to the jquery object to set or obtain the html content of the node. For example, in the above example, the 17th line var text = tdObj.html () in jquery code ()

4. Add the val method to the jquery object to obtain or set the value of the node. For example, in the jquery code above, the first line var inputtext =$ (this). val ()

5. Add the width method after the jquery object to set or obtain the width of a node. For example, in the above example, the jquery Code contains the 27th line tdObj. width ()

6. Add the apppendTo method after the jquery object to append a node to all the subnodes of the other node. For example, in the above example, the appendTo (tdObj) line 27th in jquery code)

7. Add the trigger method to the jquery object to start a js event. For example, in the jquery code above, the first line of inputObj. trigger ("focus"). trigger ("select ")

8. Add the children method to the jquery object to obtain the subnode of a node. You can set parameters to limit the content of the subnode. For example, in the above example, the 13th line tdObj. children ("input"). length in jquery code

9. If the jquery object returned by the selector contains multiple dom nodes and a similar click event is registered on this object, all dom nodes will be used for this event. For example, in the above example, the jquery Code contains row 9th numId. click;

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.