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
– reto, Commented Nov 15, 2013 at 7:46
What is "use strict"; and where is your function closing } braces. — Roopendra
– Roopendra, Commented Nov 15, 2013 at 7:46

zzlalani · Accepted Answer · 2013-11-15 07:59:51Z

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, 2013 at 7:59

answered Nov 15, 2013 at 7:51

zzlalani

24.6k16 gold badges48 silver badges73 bronze badges

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

3 Comments

user2995314 Over a year ago

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 :jsfiddle.net/michelle_low/VHLdE

zzlalani Over a year ago

check this jsfiddle.net/VHLdE/1.. in the left window second dropdown is set to onload it should be on no wrap - in <head>

user2995314 Over a year ago

Ah I see. Thanks. Would you mind explaining why doesn't it work if set to onload?

AZee · Accepted Answer · 2013-11-15 08:32:14Z

0

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/

edited Nov 15, 2013 at 8:32

answered Nov 15, 2013 at 8:25

AZee

234 bronze badges

1 Comment

user2995314 Over a year ago

Thanks but I can't get it work in Fiddle. I made the modification but nothing changed. jsfiddle.net/michelle_low/VHLdE

Shikiryu · Accepted Answer · 2013-11-15 08:48:08Z

0

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

}

edited Nov 15, 2013 at 8:48

Shikiryu

10.3k9 gold badges53 silver badges76 bronze badges

answered Nov 15, 2013 at 8:06

achan1989

1013 silver badges10 bronze badges

Collectives™ on Stack Overflow

Adding html input to table

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related