javascript - Adding html input to table - Stack Overflow

admin管理员组

文章数量:1401171

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

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

• javascript
• html

Share Improve this question Follow edited Nov 15, 2013 at 7:47 Nalaka526 11.5k2121 gold badges8585 silver badges118118 bronze badges asked Nov 15, 2013 at 7:42 user2995314user2995314 1311 gold badge11 silver badge33 bronze badges 3

• Where does the variable row e from? Your Java Script Console (in Firebug for example) should show you this as an error when you execute the code. – reto Commented Nov 15, 2013 at 7:46
• You don't have an object called row. – Carlangueitor Commented Nov 15, 2013 at 7:46
• What is "use strict"; and where is your function closing } braces. – Roopendra Commented Nov 15, 2013 at 7:46

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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/Sg2vD/

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/HypdD/

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

}

本文标签： javascriptAdding html input to tableStack Overflow