JavaScript simple grid?

I need a simple (HTML/JavaScript) working example for the following objective. In a table with three columns and 5 rows the first column is a text box开发者_开发知识库. The second column is a button/link called EDIT and third column is button/link called SAVE.

When I click on EDIT for say the 3rd row the textbox in 3rd row should become editable. I enter text, then click SAVE. It should revert to read-only. The premise is it should be editable row-wise.

Can you provide a working example? Or point me to a relevant resource?

---

I would suggest looking into a framework. Believe me, unless your purpose behind this is learning how something works (I don't get that impression from your question wording), you will find it much harder implementing from scratch than using a framework.

I would suggest looking at the Ext Framework (my personal preference) as they have a very simple EditableGrid that is quick to setup and use.

---

I appreciate this question is 11 years old but for the sake of continuing to help the community who might read this years later I feel I should mention that I have created a simple grid system build on JS that would be able to help provide a solution for this exact problem ... and many others!

its called JSGridSystem

and you can find the code and a working demo here...

https://github.com/cwoolf123/JSGridSystem

as long as you edit your html & javascript to the documentation... the code will copy whatever you make and return it to the grid id with the correct widths required

---

See YUI DataTable. Not exactly what you asked for, but it might make a reasonable starting point.