Javascript function to append table with cells containing input field and value

Question

I created a working function that appends a table with cells/rows and then populates those cells with data from an array. The problem is now I need to change it so that the generated cells contain an input field where the value= is the array data.

Here is an example of the closest I have been able to come: http://jsfiddle.net/JEAkX/3/

at one point I tried changing to cell.innerHTML = "<input type='text' size='1'>"+ subset[i++] +"</input>" but it just put the data outside of the input text area.

subset[i++] creates the correct output but I cant seem to get it inside a field value.

Here is the function before I edited it for an input field:

function appendTable(id)
{
    var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
    var i = 0;
    for (var r = 0; r < 4; r++) {
        var row = tbody.insertRow(r);
        for (var c = 0; c < 4; c++) {
            var cell = row.insertCell(c);
            cell.appendChild(document.createTextNode(subset[i++]));
        }
    }
}

All these answers here work, thanks guys! Giving it @JeanK for being first. — tehaaron
– tehaaron, Commented Mar 10, 2011 at 0:09
+1 for using/introducing jsfiddle (for people unfamiliar with it. e.g. myself) — Saurabh
– Saurabh, Commented Mar 10, 2011 at 0:22

JeanK · Accepted Answer · 2011-03-09 23:49:27Z

1

Instead of doing:

cell.innerHTML = "<input type='text' size='1'>"+ subset[i++] +"</input>"

Try to do this:

cell.innerHTML = "<input type='text' size='1' value='" + subset[i++] + "'/>"

Using the value property of the input, this way it should work.

answered Mar 9, 2011 at 23:49

JeanK

1,7751 gold badge15 silver badges22 bronze badges

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

1 Comment

tehaaron Over a year ago

Thanks for the quick answer! I think I tried this once but must have messed up a " somewhere and not double checked when it didn't work.

Ian Hughes · Accepted Answer · 2011-03-09 23:55:45Z

1

You were on the right track, you need to add the text to the input value like:

cell.innerHTML = "<input type='text' size='1' value='" + subset[i++] + "' />";

and your subset needs to be populated with some values.

answered Mar 9, 2011 at 23:55

Ian Hughes

4012 silver badges4 bronze badges

Comments

Saurabh · Accepted Answer · 2011-03-10 00:04:20Z

1

Use this:

 value=''+subset[i++]

instead of

value='subset[i++]'

So your new function should read like :

function appendTable(id)
{
    var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
    var i = 0;
    for (var r = 0; r < 4; r++) {
        var row = tbody.insertRow(r);
        for (var c = 0; c < 4; c++) {
            var cell = row.insertCell(c);
            cell.innerHTML = "<input type='text' size='1' value=''+subset[i++] />"
        }
    }
}

answered Mar 10, 2011 at 0:04

Saurabh

7991 gold badge7 silver badges19 bronze badges

Collectives™ on Stack Overflow

Javascript function to append table with cells containing input field and value

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related