Pages

2009年10月19日月曜日

JQueryを利用して簡単に行を追加

以下のHTMLの状態で下記JavaScriptを実行すると行が追加される。

<table id="hoge">
    <tbody>
    <tr>
        <td>col1-row1</td>
        <td>col2-row1</td>
    </tr>
    </tbody>
</table> 
 
▼JavaScript 
 
$('#hoge').append(''
    + '<tr>'
    +   '<td>'
    +       'col1-row2'
    +   '</td>'
    +   '<td>'
    +       'col2-row2'
    +   '</td>'
    + '</tr>'
    ;
); 
これってようするに 
$('#hoge')[0].innterHTML = $('#hoge')[0].innterHTML
    + '<tr>'
    +   '<td>'
    +       'col1-row2'
    +   '</td>'
    +   '<td>'
    +       'col2-row2'
    +   '</td>'
    + '</tr>'
    ;
  

と一緒か。。。?

でも下記の方が早いみたいですね。。。
$('#hoge').append(
    $('<tr>').append(
        $('<td>').text('col1-row2')
    ).append(
        $('<td>').text('col2-row2')
    )
);

0 件のコメント:

コメントを投稿

Followers