Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Добавление select элемента в таблицу (https://javascript.ru/forum/dom-window/75544-dobavlenie-select-ehlementa-v-tablicu.html)

w03zd8rc 18.10.2018 12:51

Добавление select элемента в таблицу
 
Добрый день!
Пытаюсь через JS добавить селект в ячейку таблицы. Делаю так:
cell = row.insertCell(0);
cell.innerHTML = "<select name='name' style='width: 100%'>";
cell.innerHTML += "<option value='0'></option>";
cell.innerHTML += "<option value='872'>1</option>";
cell.innerHTML += "<option value='799'>2</option>";
cell.innerHTML += "<option value='1057'>3</option>";
.... <очень много элементов>
cell.innerHTML += "</select><br/>";


Однако при выполнении такой конструкции в ФФ получается в ячейке следующее:
<select name="name" style="width: 100%"></select><option value="0"></option><option value="872">1</option><option value="799">2</option><option value="1057">....


т.е. селект сразу закрывается, а элементы встают рядом с ним списком.

рони 18.10.2018 13:00

Цитата:

Сообщение от w03zd8rc
cell.innerHTML =

это надо делать 1 раз
создайте строку полностью, и только затем добавьте.

рони 18.10.2018 13:03

w03zd8rc,
cell = row.insertCell(0);
var html = "<select name='name' style='width: 100%'>";
html += "<option value='0'></option>";
html += "<option value='872'>1</option>";
html += "<option value='799'>2</option>";
html += "<option value='1057'>3</option>";
//.... <очень много элементов>
html += "</select><br/>";
cell.innerHTML = html

w03zd8rc 18.10.2018 13:11

Пробовал формировать строку полностью - получается очень длинной и JS встаёт колом (возможно упираюсь в разрешённую длину строки).

cell.innerHTML += "<option value='0'></option>";
cell.innerHTML += "<option value='872'>1</option>";
cell.innerHTML += "<option value='799'>2</option>";
cell.innerHTML += "<option value='1057'>3</option>";


это формируется из php, и элементов может быть больше тысячи.

Решил пойти другим путём:

select = cell.children[0];
<цикл>
opt = document.createElement('option');
opt.value = '1';
opt.title = 'тыкни сюда';
opt.innerHTML = '1';
select.appendChild(opt);
<конец цикла>

и в цикле все элементы.
В такой конструкции отрабатывает


Часовой пояс GMT +3, время: 12:04.