Проблема в редактируемой таблице в HTML

Question

У меня есть таблица в HTML. Я сделал эту таблицу как редактируемую с помощью Javascript. Когда пользователь щелкает ячейку, она становится редактируемой. Проблема здесь в том, что когда ячейка уже доступна для редактирования, если пользователь снова нажимает на ячейку ...., появляются некоторые теги и другие элементы, т.е. новые текстовые поля появляются для каждого клика.

Как это можно предотвратить?

Я использую следующий код Javascript.

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

Если после каждого клика появляются новые текстовые поля, ваш код не заботится о случае: если в ячейке уже есть текстовое поле ввода, не продолжайте вводить дополнительный HTML-код для текстового поля ввода, когда пользователь нажимаетв ячейке.

Одним из способов предотвратить это может быть присвоение классу ячейки таблицы имени класса, например "editable", в конце вашей функции changeContent.Тогда вы можете иметь код в той же функции, который будет помещен в HTML-код только для поля ввода, если tablecell.className не «редактируемый».

Запомните в функции submitNewName, чтобы также удалить «редактируемое» имя класса для ячейки после того, как пользователь завершит редактирование.