0

私はjavascriptを学ぼうとしていますが、これまでのところ完全に停止しています。フォーム（3つのフィールド：名前、姓、性別）と以下の表を含むhtml Webページを作成しました。ユーザーがそのフォームに入力しているデータをリストし、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

これが私の試みです：

フィドル

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 に答える
1

ステップ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行を追加するために使用する代わりに。残りは同じです。この例を参照してください。

于 2012-10-24T12:58:29.027 に答える