Блог

Главная - Вопросы по программированию - При нажатии на ячейку html-таблицы Сделайте ее доступной для редактирования с помощью выпадающего списка, а не текстового поля

При нажатии на ячейку html-таблицы Сделайте ее доступной для редактирования с помощью выпадающего списка, а не текстового поля

#javascript #html #drop-down-menu

#javascript #HTML #выпадающее меню

Вопрос:

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

 function changeContent(tablecell)
{
    tablecell.innerHTML = "<INPUT type=text name=newname onBlur="javascript:submitNewName(this);" value="" tablecell.innerHTML " ">";
    tablecell.firstChild.focus();
}

Я хотел бы отобразить выпадающий список вместо текстового поля. Также в этом выпадающем списке должны быть опции Ежедневно и ежемесячно.

Как я могу это сделать?

Комментарии:

1. Для подобных вещей лучше использовать jQuery. Потратьте свое время, и результат будет отличным.

2. @sergzach Я с этим не согласен. Ему нужно гораздо лучше понимать встроенные функции JS, прежде чем начинать осваивать jQuery.

Ответ №1:

Пример статических строк:

 function changeContent(tablecell)
{
var cellInner =  "<select name="newname" onBlur="javascript:submitNewName(this);">";
cellInner  = "<option>"   tablecell.innerHTML   "</option>";
cellInner  = "<option>Daily</option>";
cellInner  = "<option>Monthly</option>";
cellInner  = "</select>";

tablecell.innerHTML = cellInner;

tablecell.firstChild.focus();

}

Но, честно говоря, мне не нравится подход со статической строкой. Вам было бы лучше использовать функции JS DOM.

Что-то вроде:

 function changeContent(tablecell)
{
var dropDown = document.createElement("select");

//  Set attributes.
dropDown.name = "newname";
//.... etc

var option1 = document.createElement("option");
option1.innerHTML = tablecell.innerHTML;

var option2 = document.createElement("option");
option2.innerHTML = "Daily";

var option3 = document.createElement("option");
option3.innerHTML = "Monthly";

dropDown.appendChild(option1);
dropDown.appendChild(option2);
dropDown.appendChild(option3);

tablecell.innerHTML = "";
tablecell.appendChild(dropDown);
}

Я не тестировал код, поэтому могут быть некоторые синтаксические ошибки, но принцип верен

Ответ №2:

 function changeContent(tablecell)
{
    tablecell.innerHTML = "<SELECT><option name='daily'>Daily</option><option name='monthly'>Monthly</option></SELECT>";
}

Ответ может быть неполным. В этом случае, пожалуйста, детализируйте это.