Problem in editable table in HTML

Question

Hi, I have a table in HTML. I have made this table as editable by using Javascript. When the user clicks a cell, it will become editable. The problem here is, when the cell is already editable, if the user again clicks on the cell ...., some tags and other things appear.i.e. new text boxes appear for every click.

How this could be prevented?

I am using the following Javascript code.

function changeContent(tablecell)
{
    //alert(tablecell.firstChild.nodeValue);
    tablecell.innerHTML = "<INPUT type=text size=\"6\" name=newname onBlur=\"javascript:submitNewName(this);\" value=\""+tablecell.innerHTML+"\">";
    tablecell.firstChild.focus();
}
function submitNewName(textfield)
{
    //alert(textfield.value);
    textfield.parentNode.innerHTML= textfield.value;
}

Answer 1

If new text boxes are appearing after every click, your code is not taking care of the case: if the cell has an input text box already, then don't continue entering additional HTML for the input text box when the user clicks on the cell.

One way to prevent this could be setting the class of the table cell to a class name like "editable" at the end of your changeContent function. Then you can have code in the same function that will only put in the HTML for the input text box if the tablecell.className is not "editable".

Remember in your submitNewName function, to also remove the "editable" class name for the cell after the user is done editing.