尝试将文本框值添加为 table 行

Question

我正在尝试读取 3 个文本框值：名字、姓氏和年龄，并在单击保存按钮后将它们添加为 table 中的一行，但它不起作用。我的功能有什么问题？

function save()
{ 
var firstName= document.getElementById("txtFname").value;
var lastName=document.getElementById("txtLname").value;
var ageValue=parseInt(document.getElementById("age").value,10);

var table2=document.getElementById("dbtable");
var fNameValue= value.createTextNode(firstName);
var lNameValue= value.createTextNode(lastName);
var agetextnode=value.createTextNode(ageValue);

td1=document.createElement("td");
td2=document.createElement("td");
td3=document.createElement("td");

td1.appendChild(fNameValue);
td2.appendChild(lNameValue);
td3.appendChild(agetextnode);

tr1=document.createElement("tr");
tr1.appendChild(td1);
tr1.appendChild(td2);
tr1.appendChild(td3);

table2.appendChild(tr1);
}

Answer 1

如果您能提供正在使用的完整 HTML/JavaScript，这会有所帮助，这样我们就能知道问题出在哪里。

我还建议分散您的逻辑，以便更容易进行故障排除。您基本上有 3 个步骤：

获取输入的值
为新行生成标记
将行附加到 table

这是一个示例，这些示例如何符合您的要求。

function save () {
  const age = document.getElementById('age').value;
  const first = document.getElementById('firstName').value;
  const last = document.getElementById('lastName').value;
  const tbody = document.querySelector('#dtable tbody');
  tbody.appendChild(createRow(age, first, last));
}

function createRow(age, first, last) {
  const tr = document.createElement('tr');
  tr.appendChild(createTd(age));
  tr.appendChild(createTd(first));
  tr.appendChild(createTd(last));
  return tr;
}

function createTd(value) {
  const td = document.createElement('td');
  td.innerText = value;
  return td;
}

table {
  width: 100%;
}

<input type="number" id="age" placeholder="age" />
<input type="text" id="firstName" placeholder="First Name" />
<input type="text" id="lastName" placeholder="Last Name" />
<button onclick="save()">Save</button>

<table id="dtable">
  <thead>
    <tr>
      <th>Age</th>
      <th>First</th>
      <th>Last</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

尝试将文本框值添加为 table 行

Trying to add textbox values as a table row

javascript

textbox