Javascript テーブルへ追加する方法

現在、このようなデザインのソフトを開発しています。

ID、PASSに情報を入れて追加ボタンを押すと下のテーブルのTwitterIdとTwitterPassに情報が追加されるような仕組みを作りたいのですが書き方がわからず困っています。

現在のHTMLはこちらです。

html
1<html>
2    <head>
3        <meta charset="UTF-8">
4        <link rel="stylesheet" type="text/css" href="css/style.css" />
5        <script src="js/twitter.js"></script>
6        <title>TwitterAccountManager</title>
7      </head>
8<body>
9  <div id="topflame">
10
11    ID:<input type="text" id="userid">
12    PASS:<input type="text" id="userpass">
13    <input type="button" value="追加" onclick="Add();">
14
15  </div>
16  <div id="downflame">
17    <div id="itsthetable">
18    <table summary="Submitted table designs">
19        <caption>Table designs</caption>
20        <thead>
21            <tr>
22                <th scope="col">表示名</th>
23                <th scope="col">TwitterId</th>
24                <th scope="col">TWitterPass</th>
25                <th scope="col">フォロー数</th>
26                <th scope="col">フォロワー数</th>
27            </tr>
28        </thead>
29        <tfoot>
30            <tr>
31                <th scope="row">Total</th>
32                <td colspan="4">5 designs</td>
33            </tr>
34        </tfoot>
35        <tbody>
36            <tr>
37                <th scope="row" id="r1"><a href="#">test</a></th>
38                <th id="test">test</th>
39                <th id="test2">test</th>
40                <th>test</th>
41                <th>test</th>
42            </tr>
43        </tbody>
44    </table>
45</div>
46
47  </div>
48</body>
49</html>
50

javascriptにてAdd()の中身をどのように記載すれば良いのかアドバイスをお願い致します。

行動規範の内容に同意します

回答1件

inputタグにid属性ついてるので、

「document.getElementById( id属性の値 ).value」で各項目の値を取得する
「document.createElement( 追加したいタグ名 )」でtrタグ、tdタグ等を作成する
1で取得した値を2で作成したtdタグのinnerHTMLに設定する
2で作成したtrタグに2で作成したtdタグをappendChildする
「document.getElementsByTagName("tbody")[0]」で画面内で最初に記述されたtbodyタグを取得し、これに4で使ったtrタグをappendChildする

…でよろしいかと。横文字で書いてる部分がキーワードなので、詳しくはそれらを調べてみてください。

投稿2016/03/10 14:22