Add data to a html table in Javascript

Question

I have the following problem. I would like to add some data to a table using label values (in this case 7 & 5) but every time I try to add a value, the cells show the message "undefined". The main idea is to create a table which values are going to be used to draw a bar chart (graph) using the highcharts library

<h2>Add Row in JavaScript</h2>
<table id="table" cellspacing="0" border="1">
<tbody>
<tr>
<td>Name</td>
<td>Address</td>
</tr>
</tbody>
</table>
<button onclick="javascript:addRow('table')">Add row</button>
<br></br>
<label id="txt1" value="7" text="a">label 1</label>
<label id="txt2" value="5" text="b">label 2</label>

Script:

function addRow(id){

    var label = ($("#txt1").val());
    var label2 = ($("#txt2").val());

var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
var row = document.createElement("tr");
var data1 = document.createElement("td");
data1.appendChild(document.createTextNode(label.value));
var data2 = document.createElement("td");
data2.appendChild(document.createTextNode(label2.value));
row.appendChild(data1);
row.appendChild(data2);
tbody.appendChild(row);
}

Example in JFiddle Code

Highcharts library Code

var label = ($("#txt1").val()); is jQuery. Are you including / running jQuery? The rest is straight javascript (and if you're using jQuery, could be much simpler) — random_user_name
– random_user_name, Commented May 2, 2014 at 16:05
doing it in plain javascript is a pain, wouldn't you be missing the use of a higher level library such as knockout or angular? I like knockout because their tutorial makes it easy to learn: learn.knockoutjs.com/#/?tutorial=intro — Eduardo Wada
– Eduardo Wada, Commented May 2, 2014 at 16:10
A quick modification of your jsfiddle: http://jsfiddle.net/pHd8r/ — markpsmith
– markpsmith, Commented May 2, 2014 at 16:29

Rashmin Javiya · Accepted Answer · 2014-05-02 18:43:40Z

1

It seems you have taken label instead of textbox, anyway below is working code.

function addRow(id) {

    var label = ($("#txt1").attr("value"));
    var label2 = ($("#txt2").attr("value"));

    var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
    var row = document.createElement("tr");
    var data1 = document.createElement("td");
    data1.appendChild(document.createTextNode(label));
    var data2 = document.createElement("td");
    data2.appendChild(document.createTextNode(label2));
    row.appendChild(data1);
    row.appendChild(data2);
    tbody.appendChild(row);
}

answered May 2, 2014 at 18:43

Rashmin Javiya

5,2223 gold badges31 silver badges49 bronze badges

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

Collectives™ on Stack Overflow

Add data to a html table in Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related