Вставка текстового поля в ячейку таблицы с помощью javascript

Question

Я делаю программу, в которой я хочу добавить поле ввода в ячейку таблицы. Посмотрите на код ниже:

var arr_title = ["song","artist","genre"]; 
for (var title in arr_title){ 
    var newl = document.createElement("input"); 
    newl.id = 'edit_text'; 
    var newf = "td_" + arr_title[title]; 
    newf.appendChild(newl); 
} 

Newf получает значение td_song, td_artist и т.д., и они уже определены как:

var td_song = document.createElement("td"); 
var td_artist = document.createElement("td"); 
var td_genre = document.createElement("td"); 

в одной и той же функции, а затем я приложил их к стол и работает отлично

, но когда я создаю элемент ввода, то есть ошибка:

Uncaught TypeError: newf.appendChild не функция

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

Помощь!

Answer 1

значение, сохраненное в newf, представляет собой строку, а не элемент DOM; appendChild не является допустимым методом для строк. Просто потому, что строковое значение, сохраненное в newf, соответствует имени созданной вами переменной (td_song и т. Д.), Не означает, что теперь это дескриптор этого элемента. Вы бы лучше хранить ваши созданные элементы в объекте, ключ от этого значения:

var elems = { 
    td_song: document.createElement("td"), 
    td_artist: document.createElement("td"), 
    td_genre: document.createElement("td") 
}; 
var arr_title = ["song","artist","genre"]; 
for (var title in arr_title){ 
    var newl = document.createElement("input"); 
    newl.id = 'edit_text'; 
    var newf = "td_" + arr_title[title]; 
    elems[newf].appendChild(newl); 
} 

Answer 2

Есть ли у вас <td> идентификатор «td_» + arr_title [название]? Если да, то вам нужно сделать ...

var newf = document.getElementById("td_" + arr_title[title]); 
newf.appendChild(newl); 

Answer 3

newf является строкой, и вы не можете добавить ребенка в строку, если вы хотите обратиться к переменной с этим именем, вы должны использовать window:

window[newf].appendChild(newl); 

Надеюсь, что это поможет.

Answer 4

После этой строки, содержимое NEWF это просто строка чтения «td_song», например.

var newf = "td_" + arr_title[title]; 

Возможно, вы получаете ошибку JS из "newf is not a function"?

Если вы хотите Newf действительно быть один из тех ПОСРЕДНИКОВ, вы можете изучить с помощью Eval()

var newf = eval("td_" + arr_title[title]);