Question

我正在尝试学习javascript，但到目前为止，我完全停止了。我已经制作了一个带有表格的html网页（3个字段：姓名，姓氏，性别）和下表。我正在尝试列出用户在该表单中键入的数据，并使用javascript（appendChild）将其显示在表格下方

我怎么能这么容易？例子受到高度赞赏。

<HTML>
  <HEAD>
    <TITLE>Test1</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    <link rel="stylesheet" href="style.css" type="text/css" />

    <script language="javascript">


function addRow(){
...


    </script>

  </HEAD>
  <BODY>


<form>
Name:<br>
<input type="text" id="name"><br>
Last Name: <br> 
<input type="text" id="lname"><br>
Gender: <br>
<input type="text" id ="gender"> <br>
<input type="submit" id ="submit" value="Submit" onclick="addRow()">
</form> 


<table border="1">
<tr>
<th>Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>test, test</td>
<td>test, test</td>
</tr>
<tr>
<td>test2, test1</td>
<td>test2, test1</td>
</tr>
</table>


  </BODY>
</HTML>

Answer 1

这是我的尝试：

fiddle

JavaScript的：

(function setup() {
    "use strict";

    var fNameElem = document.getElementById("fName");
    var lNameElem = document.getElementById("lName");
    var genderElem = document.getElementById("gender");
    var ageElem = document.getElementById("age");
    var tableElem = document.getElementById("table");
    document.getElementById("display").addEventListener("click", function () {
        var newRow = tableElem.insertRow(-1);
        var newCell = newRow.insertCell(0);
        var newText = document.createTextNode(lNameElem.value + ", " + fNameElem.value);
        newCell.appendChild(newText);
        newCell = newRow.insertCell(1);
        newText  = document.createTextNode(genderElem.value);
        newCell.appendChild(newText);
        newCell = newRow.insertCell(2);
        newText  = document.createTextNode(ageElem.value);
        newCell.appendChild(newText);
        fNameElem.value = "";
        lNameElem.value = "";
        ageElem.value = "";
        tableElem.value = "";
    });
})();

HTML：

First Name:<br>
<input type="text" id="fName" /><br>
Last Name: <br> 
<input type="text" id="lName" /><br>
Gender: <br>
<input type="text" id="gender" /><br>
Age: <br>
<input type="text" id ="age" /> <br>
<input type="button" id ="display" value="Display" /><br>
<table id= "table" border="1">
<tr>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
</tr>
</table>

Answer 2

第1步：

为您的表格提供标识符：

<table border="1" id="results">

第2步：

获取此表的DOM引用：

var table = document.getElementById('results');

<强>步骤3：

制作要插入的元素：

var row = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');

<强>步骤4：

设置它们的值：

td1.innerHTML = document.getElementById('name').value;
td2.innerHTML = document.getElementById('lname').value;
td3.innerHTML = document.getElementById('gender').value;
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);

<强>步骤5：

插入DOM：

table.children[0].appendChild(row);

结合起来，我们有：

function addRow(){
    var table = document.getElementById('results');
    var row = document.createElement('tr');
    var td1 = document.createElement('td');
    var td2 = document.createElement('td');
    var td3 = document.createElement('td');
    td1.innerHTML = document.getElementById('name').value;
    td2.innerHTML = document.getElementById('lname').value;
    td3.innerHTML = document.getElementById('gender').value;
    row.appendChild(td1);
    row.appendChild(td2);
    row.appendChild(td3);
    table.children[0].appendChild(row);
}

如果您想要添加一行，可以使用以下内容：

table.children[0].insertBefore(row,table.children[0].childNodes[1]);

而不是使用appendChild追加行。其余的都是一样的。请参阅this示例。

使用提交表单填充表格（javascript）

2 个答案: