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

Posted on 2006-04-05
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
    LVL 49

    Accepted Solution

    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,

    LVL 1

    Author Comment


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

    LVL 49

    Expert Comment

    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

    Threat Intelligence Starter Resources

    Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

    Join & Write a Comment

    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
    In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

    754 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

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now