CODEWITHSUNDEEP
javascripthtml-table
Adrian87
Adrian87

Reputation: 101

Add data to a html table in Javascript

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

Upvotes: 1

Views: 175

Answers (1)

Rashmin Javiya
Rashmin Javiya

Reputation: 5222

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

Upvotes: 1

Related Questions