0

我正在尝试学习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>
4

2 回答 2

1

第1步：

给你的表一个标识符：

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

第2步：

获取对该表的 DOM 引用：

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

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

第五步：

插入 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用来追加行。其余的都是一样的。请参阅此示例。

于 2012-10-24T12:58:29.027 回答
1

这是我的尝试：

小提琴

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>
于 2012-10-24T13:50:07.387 回答