inserting text-field to table cell using javascript

Question

I am making a program in which I want to add an input field to a table cell. Look at the code below:

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 gets the value of td_song,td_artist etc and these are already defined as:

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

in the same function and then I've appended them to a table and it works fine

but when I am creating the input element then there's an error:

Uncaught TypeError: newf.appendChild is not a function

I know it has no end tag and it needs to be in a form element, but the error is same when I try to add any other element.

Help!

newf is a string not an element so you cannot appendChild to it — Rich Andrews, Feb 18 '16 at 19:29

score 2 · Accepted Answer · answered Feb 18 '16 at 19:30

2

the value stored in newf is a string, not a DOM element; appendChild is not a valid method on strings. Just because the string value stored in newf matches the name of a variable you created (td_song, etc), does not mean it is now a handle to that element. You would be better of storing your created elements in an object, keyed off of that value:

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);
}

answered Feb 18 '16 at 19:30

Rob M.

35,491
6
51
50

thank you for your idea..but what I am doing is that before creating the input element I added some text to the td element (through user-input) and then create a text-box in the same table cell. So if I do it your way..won't that create two different table cells one when I access the object to append text and then to add a text-box? – sachsure Feb 18 '16 at 19:43
The way I have outlined will create one `td` element for td_song, td_artist and td_genre and append an input to whichever element, as it is currently being done in your code. It will not create another `td` when you access the object, only if you call `document.createElement('td')` again, which I don't see you doing anywhere. If you want to add another element to the table cell outside of this you would just call: `elems.td_song.appendChild(someOtherElement);`, for example – Rob M. Feb 18 '16 at 19:47
oh yeah! this works. I get it now.thanks, I just read why we should avoid using eval, this is a better idea :) – sachsure Feb 18 '16 at 20:11

score 1 · Answer 2 · answered Feb 18 '16 at 19:30

1

After this line, the contents of newf is simply a string reading "td_song" for example.

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

You are probably getting a JS error of "newf is not a function" ?

If you want newf to really be the one of those vars, you could explore using eval()

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

answered Feb 18 '16 at 19:30

efreed

991
11
18

http://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea – Zakaria Acharki Feb 18 '16 at 19:31
thank you so much..this worked..I dint know about eval..thanks – sachsure Feb 18 '16 at 19:38
Ha ha. There's always some robot crying about eval. Crossing the street is dangerous too if you don't know what you're doing. I did +1'd Rob's answer though for giving an example for how it can be done without eval using an object, that is a thoughtful recommendation. – efreed Feb 18 '16 at 19:39
Sure thing @eric, if that's the way you wind up going, you can mark this one as the answer. – efreed Feb 18 '16 at 19:41
1

I still haven't crossed 15 reputation :P – sachsure Feb 18 '16 at 19:44

score 0 · Answer 3 · answered Feb 18 '16 at 19:29

0

Does the <td> you're trying to append to have an ID of "td_" + arr_title[title]? If so, you need to do...

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

answered Feb 18 '16 at 19:29

Phil

4,029
9
62
107

thanks but it does not have this id.. the table cells have a common id, providing them a separate id will be too cumbersome. – sachsure Feb 18 '16 at 20:06

score 0 · Answer 4 · answered Feb 18 '16 at 19:29

0

newf is a string and you can't append child to string, if you want to refer to the variable with this name you should use window :

window[newf].appendChild(newl);

Hope this helps.

answered Feb 18 '16 at 19:29

Zakaria Acharki

66,747
15
75
101

inserting text-field to table cell using javascript

4 Answers4