Making a <td> editable using css.  Help needed if possible.

Posted on 2006-04-05
Medium Priority
Last Modified: 2006-11-18

I am trying to make this html table editable.  I have a query that generates any number of rows with values liek

First Name  | Last Name | Email  |  edit icon

When the user clicks the graphical edit icon, I want the given row they are trying to edit, to change the firstname, lastname, and email fields into input boxes so the user can change the values.  The edit icon at that point should change to a save icon basically another graphic that looks like a 'save icon'

How can I do this?

So essentially the values in the above 3 columns are just in <td's>, but when you click the edit icon, it should go from just text as "John" to an input field with the value "John" so the user can then change it.

Hope that makes sense.


Question by:Westside2004
  • 2
LVL 49

Accepted Solution

Roonaan earned 1400 total points
ID: 16385036
You could have
<tbody class="uneditable" id="myTbody">
     <td><a class="whenUnEditable" href="#edit" onclick="document.getElementById('myTbody').className='editable';return false;">Edit</a>
     <td><span class="whenUnEditable">Joe</span>
         <input type="text" class="whenEditable" value="Joe" />

Then have this css:

.uneditable .whenEditable {display:none;}
.editable .whenUnEditable {display:none;}

Hope this helps, and makes sense,


Author Comment

ID: 16385404

This does not seem to work in firefox...maybe I should have mentioned that

LVL 49

Expert Comment

ID: 16388895
I doubt is doesn't work in firefox, because I have the same script using collapses/uncollapsed working fine.

In firefox, what does the Javascript console from the tools menu say?


Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month13 days, 10 hours left to enroll

750 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question