Adding html input to table

Question

I can't get the codes to work. Can somebody point out what have I done wrong? I just want to print the input to a table using JavaScript.

HTML

Item:
<input type="text" name="item" id="item" /><br />
Quantity:
<input type="text" name="quantity" id="quantity" /><br />
Price: AUD
<input type="text" name="price" id="price" /><br /><br />
<input type="button" value="Add Product +" onClick="addRow()" id="add"><br /><br />

<table id="table" border="1">
    <tr>
        <th>Item</th>
        <th>Quantity</th>
        <th>Price</th>
    </tr>
</table>

JavaScript

function addRow() {
   "use strict";

    var table = document.getElementById("table");
    var td1 = document.createElement("td");
    var td2 = document.createElement("td");
    var td3 = document.createElement("td");    

    td1.innerHTML = document.getElementById("item").value;
    td2.innerHTML  = document.getElementById("quantity").value;
    td3.innerHTML  = document.getElementById("price").value;

    row.appendChild(td1);
    row.appendChild(td2);
    row.appendChild(td3);

    table.children[0].appendChild(row);
});

Where does the variable `row` come from? Your Java Script Console (in Firebug for example) should show you this as an error when you execute the code. — reto, Nov 15 '13 at 07:46
What is `"use strict";` and where is your function closing `}` braces. — Roopendra, Nov 15 '13 at 07:46

zzlalani · Accepted Answer · 2013-11-15T07:59:51.883

1

You are missing

var row= document.createElement("tr");

before the line

var td1 = document.createElement("td");

and in the end }); is a syntax error. replace it with }

Fiddle: http://jsfiddle.net/Sg2vD/

edited Nov 15 '13 at 07:59

answered Nov 15 '13 at 07:51

zzlalani

22,960
16
44
73

Thanks.. I don't know why Fiddle didnt show any error initially. I have made the modification but it's not running. Can you point out what else I havent done? Thanks Fiddle :http://jsfiddle.net/michelle_low/VHLdE/ – user2995314 Nov 16 '13 at 10:29
check this http://jsfiddle.net/VHLdE/1/.. in the left window second dropdown is set to `onload` it should be on `no wrap - in ` – zzlalani Nov 16 '13 at 10:34
Ah I see. Thanks. Would you mind explaining why doesn't it work if set to onload? – user2995314 Nov 16 '13 at 11:12

score 0 · Answer 2 · edited Nov 15 '13 at 08:48

javascript code here

function addRow()
{
    var table = document.getElementById("table");
    var row = document.createElement("tr");
    var cell = document.createElement("td");
    var cellText = document.createTextNode(document.getElementById("item").value);
    cell.appendChild(cellText);
    row.appendChild(cell);

    var cell = document.createElement("td");
    var cellText = document.createTextNode(document.getElementById("quantity").value);
    cell.appendChild(cellText);
    row.appendChild(cell);

    var cell = document.createElement("td");
    var cellText = document.createTextNode(document.getElementById("price").value);
    cell.appendChild(cellText);
    row.appendChild(cell);
    table.appendChild(row);

}

AZee · Answer 3 · 2013-11-15T08:32:14.230

If you are using table, it is best practice to create thead and tbody elements in the table to separate the header and the body. Use the tbody to display your form input. There are some syntax error at the end of your addRow javascript function and missing row element.

Here is the code:

 Item:
<input type="text" name="item" id="item" />
<br />Quantity:
<input type="text" name="quantity" id="quantity" />
<br />Price: AUD
<input type="text" name="price" id="price" />
<br /><br />
<input type="button" value="Add Product +" onClick="addRow()" id="add">
<br /><br />
<table id="table" border="1">
<thead id="table-head">
<tr>
    <th>Item</th>
    <th>Quantity</th>
    <th>Price</th>
</tr>
</thead>
<tbody id="table-body">
</tbody>
</table>
<script>
function addRow() {
"use strict";

var tableBody = document.getElementById("table-body");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");    
var row = document.createElement("tr");

td1.innerHTML = document.getElementById("item").value;
td2.innerHTML  = document.getElementById("quantity").value;
td3.innerHTML  = document.getElementById("price").value;

row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);

tableBody.appendChild(row);
}
</script>

Fiddle: http://jsfiddle.net/HypdD/

Thanks but I can't get it work in Fiddle. I made the modification but nothing changed. http://jsfiddle.net/michelle_low/VHLdE/ — user2995314, Nov 16 '13 at 10:32

Adding html input to table

3 Answers3