Implement editable table demo: Example picture: " -//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <u>//Simplified ready Writing method: When the page is loaded, call </u>$(function() { </a>//Set the background color of the even number tr in tbody to #ECE9D8 </span>$("tbody tr:even").css(" background-color", "#ECE9D8"); </div>//Set the even number td in tbody to numTd <div class="codebody" id="code17724">var numTd = $("tbody td:even"); <br>//Give these cells Register the mouse click event <br>numTd.click(function() { <br>//Get the jquery object of the clicked element <br>var tdObj = $(this); <br>//If the clicked element contains input The control does not perform click processing <br>if (tdObj.children("input").length > 0) { <br>return false; <br>} <br>//Get the td content and append the value to text <br>var text = tdObj.html(); <br>//Clear the content in td<br>tdObj.html(""); <br>//Create a text box, remove the border of the text box, and set the text box The text font size in is 16px <br>//Make the width of the text box the same as the width of the td, set the background color of the text box, you need to put the content in the current td into the text box <br>//Place the text box Insert into td <br>var inputObj = $("<input type='text'>").css("border-width", "0") <br>.css("font-size", "16px").width(tdObj.width()) <br>.css("background-color", tdObj.css("background-color")) <br>.val(text).appendTo(tdObj); <br>//Set the trigger to trigger the focus event first and then the select event<br>inputObj.trigger("focus").trigger("select"); <br>//The text box will be selected after it is inserted<br>inputObj.click(function() { <br>return false; <br>}); <br>//Register keyup event<br>inputObj.keyup(function(event) { <br>//Get the current pressed Keyboard key value<br>var keycode = event.which; <br>//Handle carriage return<br>if (keycode == 13) { <br>//Get the content in the current text box<br>var inputtext = $(this).val(); <br>//Modify the content of td to the content in the text box<br>tdObj.html(inputtext); <br>} <br>//Process esc <br>if (keycode == 27) { <br>//Restore the content in td to text <br>tdObj.html(text); <br>} <br>}); <br>} ); <br>}); <br> <br>table <br>{ <br>border: 1px solid black; <br>border-collapse: collapse; <br>width: 400px; <br>} <br>table td <br>{ <br>border: 1px solid black; <br>width: 50%; <br>} <br>table th <br>{ <br>border: 1px solid black; <br>width: 50%; <br>} <br>tbody th <br>{ <br>background-color: #A3BAE9; <br> } <br> Click the table item with the mouse to edit it Student ID Name 000001 Zhang San 000002 李思 王五 000004 Zhao Liu < /table> Knowledge points: 1.$(function() {}) is the abbreviation of $(document).ready(function() {}). 2. ":" in $("tbody td:even") means filtering, and even is an even function. The filtering conditions can be found in the selector of the help document. This sentence means to return the even number td in tbody, and the result is a set. 3. In the event $(this) will return the jquery object of this control. 4.children("input") means to get all the jquery objects whose child elements contain input, and the result is a collection. 5.css("border-width", "0") means setting the value of the css attribute. 6.trigger("focus").trigger("select") means that the setting event triggers focus first and then triggers select. 7.keyup(function(event) {var keycode = event.which;}) means registering keyboard events, and the which attribute of the parameter event stores keyboard information.
