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

今回は

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

このオブジェクトから

表の各オブジェクトの値であるtbodyの方を作成してみます。

function buildTable(){

    //ここまでのコードは省略

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

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

    return table;
}

//の部分だけ組み立てる
function buildTbody(){

}

buildTable関数のreturn table;の前にbuildTbody関数を用意して、そこでtbodyの箇所を作成します。

//<tbody>の部分だけ組み立てる
function buildTbody(){
    var tbody = document.createElement("tbody");

    //forの中で使用する変数はforの前で定義しておく
    var tr;
    var td;

    //listから各人のオブジェクトを取得する
    for (var i = 0; i < list.length; i++ ) {
        var personObj = list[i];

        tr = document.createElement("tr");

        //オブジェクト内にある各要素をtdで挟んでtrタグに入れる
        for ( key in personObj ) {
            td = document.createElement("td");
            td.innerText = personObj[key];
            tr.appendChild(td);
        }

        tbody.appendChild(tr);
    }

    return tbody;
}

buildTbody関数内で、tbodyを作成した後、最初のforで配列の中にある各人の情報が入ったオブジェクト、次のforでオブジェクトの中に入っている各値を呼び出し、DOM操作でtdで囲って、

<tbody>
    <tr>
        <td>tsuyoshi</td>
        <td>kyoto</td>
        <td>kanagawa</td>
    </tr>
    <tr>
        <td>ryoko</td>
        <td>kyoto</td>
        <td>osaka</td>
    </tr>
</tbody>

このようなHTMLタグのオブジェクトを作成して、buildTable関数内でtableのtheadの後に作成したtbodyのタグを挿入します。ここまでのコードを実行してみると、

最初に用意したlistオブジェクトの値を元に表ができました。試しに

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

新しい人のオブジェクトを追加して、コードを実行してみると、

新しく追加した人の情報も表示されます。これで人数がいくら増えても、追加に合わせて行を追加することができる様になりました。