2014年12月21日日曜日

DOM操作でオブジェクトから表を組み立てて表示する1

DOM(Document Object Model)とはJavaScriptでHTMLのタグを取得したり、挿入したりでプログラミングで見た目を変えるために利用する仕組みです。document.querySelector("#〇〇");でタグからオブジェクトを取得するのもDOM操作です。今回は、

var list = [
    {name: "tsuyoshi", address: "kyoto", from: "kanagawa"},
    {name: "ryoko", address: "kyoto", from: "osaka"}
];

用意したオブジェクトをHTMLではなく、JavaScriptで


このような表を作ります。始めにこの表をHTMLで書く場合、

<table border="1px">
    <thead>
        <tr>
            <th>名前</th>
            <th>住所</th>
            <th>出身</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>tsuyoshi</td>
            <td>kyoto</td>
            <td>kanagawa</td>
        </tr>
        <tr>
            <td>ryoko</td>
            <td>kyoto</td>
            <td>osaka</td>
        </tr>
    </tbody>
</table>


このようなコードになります。それでは、このコードをJavaScriptで書いてみます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOMでtable</title>
<script>
var list = [
    {name: "tsuyoshi", address: "kyoto", from: "kanagawa"},
    {name: "ryoko", address: "kyoto", from: "osaka"}
];

function buildTable(){

}
</script>
</head>
<body>

</body>
</html>

始めに上記のようなコードを用意して、buildTable関数で表のHTMLを作ることにしましょう。

function buildTable(){

    var table = document.createElement("table");
    //外枠をつける
    table.border = "1px";
}

始めに、document.createElementで大元のtableタグを作成します。createElementの引数にタグ名を指定すると、指定した名前の開始タグを終了タグのオブジェクトが作成されます。

document.createElement("table");で<table></table>が作成されます。次にtable.border = "1px";で<table border="1px"></table>になります。この仕組みを応用して、中の枠も作成していきます。


最初にtheadで囲まれた箇所を作成していきます。

function buildTable(){

    var table = document.createElement("table");
    //外枠をつける
    table.border = "1px";

    //<thead>を用意する
    var thead = document.createElement("thead");

    //<tr>を用意する
    var tr = document.createElement("tr");
}

document.createElementで<thead>や<tr>といった必要なタグのオブジェクトを作成しておきます。この時点では、<table>、<thead>や<tr>はバラバラに存在しています。一旦この状態で置いといて、<tr>の中身を作成してみます。

function buildTable(){

    //<table>と<thead>の箇所は一旦省略

    var tr = document.createElement("tr");

    //各項目を作る
    var th = document.createElement("th");
    th.innerText = "名前";
    tr.appendChild(th);

    //新たに<th>を作る
    th = document.createElement("th");
    th.innerText = "住所";
    tr.appendChild(th);

    //新たに<th>を作る
    th = document.createElement("th");
    th.innerText = "出身";
    tr.appendChild(th);
}

<tr>タグの中に<th>を入れて、項目を表示する際、

th = document.createElement("th");
th.innerText = "名前";

で、<th>名前</th>を作った後、

tr.appendChild(th);

事前に用意したtrでappendChild(th)をすることで、
<tr></tr>のタグの間に作成した<th>名前</th>を入れるということになり、

<tr>
    <th>名前</th>
</tr>

ということになります。残りの二つの要素も追加して、

<tr>
    <th>名前</th>
    <th>住所</th>
    <th>出身</th>
</tr>

trのオブジェクトがこのような状態になったら、事前に用意した<table>や<thead>に同じような要領で、

<table border="1px">
    <thead>
        <tr>
            <th>名前</th>
            <th>住所</th>
            <th>出身</th>
        </tr>
    </thead>
</table>

このようになります。ここまでの状態をコードにまとめると、

function buildTable(){

    var table = document.createElement("table");
    //外枠をつける
    table.border = "1px";

    var thead = document.createElement("thead");

    var tr = document.createElement("tr");

    //各項目を作る
    var th = document.createElement("th");
    th.innerText = "名前";
    tr.appendChild(th);

    //新たに<th>を作る
    th = document.createElement("th");
    th.innerText = "住所";
    tr.appendChild(th);

    //新たに<th>を作る
    th = document.createElement("th");
    th.innerText = "出身";
    tr.appendChild(th);

    //項目ができたら、theadに入れる
    thead.appendChild(tr);

    //theadをtableに入れる
    table.appendChild(thead);

    //作成した表のオブジェクトを返す
    return table;
}

このように書きます。一度、この状態で表を表示させてみましょう。buildTable関数で作った表は現時点ではどこにも表示されていないことになっていて、これをdocument.querySelectorを利用して表示します。

HTMLで表を表示する箇所は<body>タグの中、すなわち、<body>表</body>と<body>タグの中に表のHTMLを挿入すれば良いわけで、bodyタグのオブジェクトを取得して、appendChildで表のHTMLを挿入すれば良いことになります。まずはbodyタグを取得してみます。

document.querySelector("body");とquerySelectorの中の引数で#無しでタグ名を指定すると、HTML内にあるbodyタグで一番初めに出てくるものを取得することになっており、bodyタグは1回しか使用できないため、この書き方で目的のbodyタグオブジェクトは取得できます。あとは、appendChildで

var body = document.querySelector("body");
body.appendChild(buildTable());

buildTable関数で作成した表のHTMLを挿入すれば良いです。ここまでのコードを書いてみると、

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOMでtable</title>
<script>
var list = [
    {name: "tsuyoshi", address: "kyoto", from: "kanagawa"},
    {name: "ryoko", address: "kyoto", from: "osaka"}
];

window.onload = function(){
    var body = document.querySelector("body");
    body.appendChild(buildTable());
};

function buildTable(){
    var table = document.createElement("table");
    //外枠をつける
    table.border = "1px";

    var thead = document.createElement("thead");
    var tr = document.createElement("tr");

    //各項目を作る
    var th = document.createElement("th");
    th.innerText = "名前";
    tr.appendChild(th);

    //新たに<th>を作る
    th = document.createElement("th");
    th.innerText = "住所";
    tr.appendChild(th);

    //新たに<th>を作る
    th = document.createElement("th");
    th.innerText = "出身";
    tr.appendChild(th);

    //項目ができたら、theadに入れる
    thead.appendChild(tr);

    //theadをtableに入れる
    table.appendChild(thead);

    return table;
}
</script>
</head>
<body>

</body>
</html>

window.onloadイベントでbodyにtableを挿入する様に処理して、このコードを実行してみます。


HTMLの方でbodyタグ内に何も書いてない状態で、表の一部が表示されていることを確認しましょう。
投稿者 時刻:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)