JQuery allows you to double-click to edit a table. jquery double-click to edit a table.

JQuery allows you to double-click to edit a table. jquery double-click to edit a table.

First, we will show you:

The following simple table editing function is implemented in a simple way:

The simple HTML code is skipped. The following is the js implementation process.

JavaScript:

<Span style = "font-size: 18px;" >$ (". tables "). on ("dblclick", "td", function () {if ($ (this ). children ("input "). length> 0) {return false;} var tdDom = $ (this); // Save the initial value var tdPreText = $ (this ). text (); // set the width for td and for input, and assign a value to ((this%.width(100%.html ("<input type = 'text'> "). find ("input "). width (100 ). val (tdPreText); // value var inputDom = $ (this) when the focus is lost ). find ("input"); inputDom. blur (function () {var newText = $ (this ). val (); $ (this ). remove (); tdDom. text (newText) ;}); </span>

The above is the jQuery double-click table editing function introduced by xiaobian. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!