javascript - 在 Javascript 中将数据添加到 html 表

Question

我遇到以下问题。我想使用标签值(在本例中为 7 和 5)向表中添加一些数据，但每次我尝试添加值时，单元格都会显示消息“未定义”。主要思想是创建一个表，其中的值将用于使用 highcharts 库绘制条形图(图形)

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

脚本:

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

JFiddle 中的示例 Code

Highcharts 库 Code

Answer 1

看来您使用了标签而不是文本框，无论如何下面是工作代码。

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