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
– Rich Andrews, Commented Feb 18, 2016 at 19:29

Rob M. · Accepted Answer · 2016-02-18 19:30:32Z

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, 2016 at 19:30

Rob M.

36.6k6 gold badges56 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sachsure Over a year ago

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?

Rob M. Over a year ago

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

sachsure Over a year ago

oh yeah! this works. I get it now.thanks, I just read why we should avoid using eval, this is a better idea :)

efreed · Accepted Answer · 2016-02-18 19:30:53Z

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, 2016 at 19:30

efreed

1,12112 silver badges20 bronze badges

5 Comments

Zakaria Acharki Over a year ago

stackoverflow.com/questions/86513/…

sachsure Over a year ago

thank you so much..this worked..I dint know about eval..thanks

efreed Over a year ago

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 Over a year ago

Sure thing @eric, if that's the way you wind up going, you can mark this one as the answer.

sachsure Over a year ago

I still haven't crossed 15 reputation :P

Phil · Accepted Answer · 2016-02-18 19:29:23Z

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, 2016 at 19:29

Phil

4,0919 gold badges71 silver badges119 bronze badges

1 Comment

sachsure Over a year ago

thanks but it does not have this id.. the table cells have a common id, providing them a separate id will be too cumbersome.

Zakaria Acharki · Accepted Answer · 2016-02-18 19:29:30Z

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, 2016 at 19:29

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Collectives™ on Stack Overflow

inserting text-field to table cell using javascript

4 Answers 4

3 Comments

5 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related