web-dev-qa-db-ja.com

jQueryはtable / tr / tdなどを動的に作成し、属性を追加します

例では、私はこの構造を持っています（小さな例）：

<table id=example>
<tr class="blah test example"><td>Test1</td><td><a href="url">LINK</a>Test11</td></tr>
<tr class="blah test example"><td>Test2</td><td><a href="url">LINK</a>Test22</td></tr>
<tr class="blah test example"><td>Test3</td><td><a href="url">LINK</a>Test33</td></tr>
</table>

JQueryでは、次のように動的に作成します。

var test = "<table id=" + someIDVar + ">"
           + "<tr class=" + classOneVar 
+ classTwoVar + classThreeVar + ">"....

などなど...（書くべき他のものがたくさんあります）。追加した後：

$(".somePlaceInHtml").append(test);

では、jQueryを使用してそのような構造を動的に記述する他の方法はありますか？これは私にとって問題です。なぜなら、私は例で示したほど小さくはなく、大きな構造を持っているからです。主な理由は、私自身とこのコードを維持する他の開発者の可読性を向上させたいということです。

javascriptjqueryhtml-tablerefactoring
9
faya

文字列から「テンプレート」を作成できますか？はいの場合は、C＃のstring.format()メソッドで使用するのと同じように、{0}、{1}などの実際の変数のプレースホルダーを含む「定数」変数（グローバルスコープで定義されているなど）に格納します。

したがって、次のようなコードがあります。

var rowTemplate = "<tr><td>{0}</td><td>SomePredefinedText {1}</td></tr>";
var alternateRowTemplate = "<tr><td class='a'>{0}</td><td>SomewhatDifferent {1}</td></tr>";
 ...... somewhere deep in your code
 $("#someElement").append(
        rowTemplate.format("myvalue1", "myvalue2")
       ).append(
        alternateRowTemplate.format("myvalue3", "myvalue4")
       );

次に、次の回答に従ってstring.format実装を使用します。 jQueryのString.formatと同等

17
naivists

簡単な例を次に示します。

_  $(function() {
    var tbl = $('<table></table>').attr({ id: "bob" });
    var row = $('<tr></tr>').attr({ class: ["class1", "class2", "class3"].join(' ') }).appendTo(tbl);
    $('<td></td>').text("text1").appendTo(row);
    $('<td></td>').text("Test22").prepend($('<a></a>').attr({ href: "#" }).text("LINK")).appendTo(row);        
    tbl.appendTo($(".somePlaceInHtml"));        
  });
_

行の部分をループでラップし、変数に置き換えます。私の意見では、少なくとも保守/読み取りが簡単ですが、私はjQueryに慣れているため、マイレージは異なる場合があります。オプションです。

ちなみに、これはどこでも.text()を使用しているため、出力内でのクロスサイトスクリプティング攻撃の防止にも役立ちます。

24
Nick Craver

C＃のようなStringBuilderを作成できます。これは ASP.NETMVCのTelerikExtensions から取得したスニペットです：

$.stringBuilder = function() {
    this.buffer = [];
};

$.stringBuilder.prototype = {

    cat: function(what) {
        this.buffer.Push(what);
        return this;
    },

    string: function() {
        return this.buffer.join('');
    }
};

このようにして、次のコードを作成できます。

var html = new $.stringBuilder();
for (var i in data)
    html.cat("<tr><td>").cat(i).cat("</td><td></tr>");

$('#element').append(html.string());

このアプローチの利点は、高速な連結が可能であり（IE6では配列結合のパフォーマンスが向上する）、他の便利な関数（たとえば、ブール式をとるcatIf、またはrepは、指定された文字列を数回繰り返します）。

1
Alex Gyoshev

または、文字列を連結する代わりに、 array.join 関数を使用することもできます。

    for(var i=0;i<arr.length;i++)
    {
      arr[i] = "<tr>" + sth + "</tr>";       
    }

node.innerHTML = arr.join('');
1
poo