CODEWITHSUNDEEP
javascripthtml
Genome314
Genome314

Reputation: 505

How to specify column to add cell to

So I have a table with one row and two columns that creates new rows with info input by the user.

The following code adds cells to the first column only:

<!DOCTYPE HTML>
<html>
<body>
Something must be entered here:
<input id="inputName" style="width:100px;"></input>
<button onclick="addRowCell('table1')">Add row</button>
<table id="table1" style="border:1px solid black;">
    <tr id="myRow1">
        <td>ID</td>
        <td>Content 1</td>
    </tr>
</table>

<script>
i=1;
function addRowCell(el){
var row = document.getElementById(el);
var fName = document.getElementById("inputName").value;
var x = row.insertRow(i);
x.innerHTML=fName;
i++;
}

</script>
</body>
</html>

JSFiddle for the above: http://jsfiddle.net/tC2zG/

Edit: for anyone with a similar problem - what you see here isn't cells being added, it's rows being added.

Upvotes: 1

Views: 495

Answers (2)

knospe
knospe

Reputation: 350

Update on your JS Fiddle:

i=1;
function addRowCell(el){
    var table = document.getElementById(el);
    var fName = document.getElementById("inputName").value;
    var row = table.insertRow(i);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = "ID";
    cell2.innerHTML = fName;
    i++;
}

Please check if that is the result that you were hoping for.

Upvotes: 1

adeneo
adeneo

Reputation: 318252

You're not adding cells at all, just rows, so add a couple of cells

i = 1;

function addRowCell(el) {
    var row = document.getElementById(el);
    var fName = document.getElementById("inputName").value;
    var x  = row.insertRow(i);
    var c1 = x.insertCell(0);
    var c2 = x.insertCell(1);
    c2.innerHTML = fName;
    i++;
}

FIDDLE

Upvotes: 5

Related Questions