0

これよりも動的に情報フィールドセットを作成するためのより良い方法はありますか？

                var grid = document.createElement("ul");
                grid.style['text-align'] = "left";

                // Creates the legend and append it
                var child = document.createElement('legend');
                child.innerHTML = "Logado - Dados";
                loginbox.appendChild(child);
                // End of creating the legend

                // Start creating the first child
                var cell = document.createElement("li");
                cell.style['padding'] = "0px";
                child = document.createElement('label');
                child.innerHTML = "<b>Usuário: </b>";
                child.for = "lusername";
                cell.appendChild(child);
                child = document.createElement('label');
                child.innerHTML = response['username'];
                child.for = "username";
                cell.appendChild(child);
                grid.appendChild(cell);
                // End adding the first labels

                // Start adding the second label                
                cell = document.createElement("li");
                cell.style['padding'] = "0px";
                child = document.createElement('label');
                child.innerHTML = "<b>Membro Desde: </b>";
                child.for = "lbirthday";
                cell.appendChild(child);
                child = document.createElement('label');
                child.innerHTML = response['MemberSince'];
                child.for = "birthday";
                cell.appendChild(child);
                grid.appendChild(cell);
                // End adding the second labels

                // Start adding the third label             
                cell = document.createElement("li");
                cell.style['padding'] = "0px";
                child = document.createElement('label');
                child.innerHTML = "<b>Última Visita: </b>";
                child.for = "llastvisit";
                cell.appendChild(child);
                child = document.createElement('label');
                child.innerHTML = response['LastVisit'];
                child.for = "lastvisit";
                cell.appendChild(child);
                grid.appendChild(cell);
                // End adding the third labels

                // Start adding the forth label             
                cell = document.createElement("li");
                cell.style['padding'] = "0px";
                child = document.createElement('label');
                child.innerHTML = "<b>Frequência de Estudo: </b>";
                child.for = "lstudyfrequency";
                cell.appendChild(child);
                child = document.createElement('label');
                child.innerHTML = response['StudyFrequency'];
                child.for = "studyfrequency";
                cell.appendChild(child);
                grid.appendChild(cell);
                // End adding the forth labels

                // Start adding the fifth label             
                cell = document.createElement("li");
                cell.style['padding'] = "0px";
                child = document.createElement('label');
                child.innerHTML = "<b>Faculdade: </b>";
                child.for = "lcollege";
                cell.appendChild(child);
                child = document.createElement('label');
                child.innerHTML = response['College'];
                child.for = "college";
                cell.appendChild(child);
                grid.appendChild(cell);
                // End adding the fifth labels

                // Start adding the sixth label             
                cell = document.createElement("li");
                cell.style['padding'] = "0px";
                child = document.createElement('label');
                child.innerHTML = "<b>Curso: </b>";
                child.for = "lcourse";
                cell.appendChild(child);
                child = document.createElement('label');
                child.innerHTML = response['Course'];
                child.for = "course";
                cell.appendChild(child);
                grid.appendChild(cell);
                // End adding the sixth labels

            loginbox.appendChild(grid);

どういうわけか、「書き込み」方式の方がいいと思います。申し訳ありませんが、JavaScriptは初めてです。

4

2 に答える 2

1

付随するhtmlまたは残りのjavascriptがなければ、以下を実際にテストする方法はありませんが、動作するはずです。そうでない場合は、お知らせください。修正します。

var grid = document.createElement("ul");
grid.style['text-align'] = "left";

// Creates the legend and append it
var child = document.createElement('legend');
child.innerHTML = "Logado - Dados";
loginbox.appendChild(child);

var list_obj = { list:
    [{
        "label": "Usuário:",
        "for": "lusername",
        "arr_key": "username",
        "for2": "username"
    },
    {
        "label": "Membro Desde:",
        "for": "lbirthday",
        "arr_key": "MemberSince",
        "for2": "birthday"
    },
    {
        "label": "Última Visita:",
        "for": "llastvisit",
        "arr_key": "LastVisit",
        "for2": "lastvisit"
    },
    {
        "label": "Frequência de Estudo:",
        "for": "lstudyfrequency",
        "arr_key": "StudyFrequency",
        "for2": "studyfrequency"
    },
    {
        "label": "Faculdade:",
        "for": "lcollege",
        "arr_key": "College",
        "for2": "college"
    },
    {
        "label": "Curso:",
        "for": "lcourse",
        "arr_key": "Course",
        "for2": "course"
    }]
}

for (var i = 0; i < list_obj.list.length; i++) {
    var label = list_obj.list[i]["label"];
    var for1 = list_obj.list[i]["for"];
    var arr_key = list_obj.list[i]["arr_key"];
    var for2 = list_obj.list[i]["for2"];
    print_field(label,for1,arr_key,for2)
}

function print_field(label,for1,arr_key,for2) {
    var cell = document.createElement("li");
    cell.style['padding'] = "0px";
    child = document.createElement('label');
    child.innerHTML = "<b>" + label + " </b>";
    child.htmlFor = for1;
    cell.appendChild(child);
    child = document.createElement('label');
    child.innerHTML = response[arr_key];
    child.htmlFor = for2;
    cell.appendChild(child);
    grid.appendChild(cell);
}​
于 2012-09-16T22:02:45.103 に答える
1

保守性、柔軟性、およびブラウザー間の互換性のために、MustacheやJadeなどのHTMLテンプレートライブラリの使用を検討することをお勧めします。

于 2013-11-02T18:08:01.933 に答える