I have met this in niuyun's news publishing system, but I didn't learn jquery or Javascript at the time. Here I create a new editable table: Click it to edit it, when you exit, the cell content is saved. you can press the Enter key to save the cell content and Press ESC to exit and save the cell content.
Front-End Interface:
HTML code:
<HTML xmlns = "http://www.w3.org/1999/xhtml">CSS:
Body {} table, table TD, table Th {/* cell width is 1, straight line, black */Border: 1px solid black;/* cell border merge */border-collapse: collapse; width: 300px; text-align: center;} table Th {/* Header color */background-color: # a3bae9 ;}JavaScript code:
// Simplified ready syntax $ (function () {// locate all the odd rows in the content area of the table and set the style $ ("tbody TR: even "2.16.css (" background-color "," # ece9d8 "); // we need to find all the student ID cells var numtd = $ (" tbody TD: Even "); // click the event numtd. click (function () {// find the TD var tdobj =$ (this); // solve the HTML code problem in Firefox if (tdobj. children ("input "). length> 0) {// input in the current TD, do not execute click processing return false;} // obtain the original content var text = tdobj.html (); // clear the content in TD tdobj.html (""); // create a text box and remove the border of the text box, set the style // you need to put the content of the current TD in the text box // Insert the text box to the TD var inputobj =$ ("<input type = 'text'>" ).css ("border -width ", "0" ).css ("font-size", "16px" ).width(tdobj.width())).css ("background-color", tdobj.css ("background-color ")). val (text ). appendto (tdobj); // It is the inputobj selected after the text box is inserted. trigger ("Focus "). trigger ("select"); inputobj. click (function () {return false ;}); // process the carriage return and ESC operations inputobj. keyup (function (event) {// obtain the key value var keycode = event for the currently pressed keyboard. which; // If (keycode = 13) when the carriage return is processed {// obtain the content var inputtext =$ (this) in the current text box ). val (); // modify the content of TD to the content in the text box tdobj.html (inputtext);} // process the situation of ESC if (keycode = 27) {// restore the content in TD to the original content tdobj.html (text );}});});});Running result:
You can click to modify the CSS of the built-in text box of the table multiple times through the event. which gets the current buttons and works well with them through simple knowledge. This is the main content of this example. If any error occurs or can be optimized, contact us.
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
