We shall create an html table with a few rows of data. Each row will have two
td columns - the first column will be for the edit link button and the second will be for displaying some text, say, a person's name.
When a user clicks the edit link, the entire record will enter data-editing mode. The contents of its cells will change - the edit link will get replaced by an update | cancel pair, and the second cell will turn into a textbox with the same data inside it.
Start by creating an html file by using any text editor, or by using any IDE like dreamweaver and give it any name, say, index.html, and type the following html into it - exactly as shown below. We suggest copy-pasting it.
Explanation of the above code
- The style tag contains rudimentary padding, etc., so that the page looks good.
- The table contains
trtags of two
tdcolumns each. The first column contains an anchor tag with
class="edit", which will be used to query for the collection of all such anchor tags, and run a for-each loop to bind them to a click event handler.
- <tr hidden id="boxes">
- This tr is the last tr tag, but it has been marked
hidden. It contains all the input controls for the edit mode. As you can see that its first cell contains the Update/Cancel pair, whereas the second cell contains the input textbox.
The plan that we follow
The following steps take place when the user clicks an edit link:
- After that the above tr is marked hidden.
id="boxes"tr that contains the edit-mode controls is moved just above it, and made visible by using the
- Lastly, the
valueattribute of the input text is set equal to the
innerTextof the td tag of the row being edited. This causes the current value to be shown as the text of the textboxes. The user can now modify it and click the update link.
The last part of the js code shows the click event handlers of the cancel and update links.
About the Ajax Code
Video Explanation with a Working Example
Please watch the following youtube video: