[jQuery]JavaScriptの配列をtableへ1行追加する

<input type="button" id="btnTest" value="データを追加" />
 
<table id="tblResult"border="1px" style="border:1px">
    <tr>
        <th style="width:140px;">伝票No</th>
        <th style="width:180px;">配送種別</th>
        <th style="width:80px;">状態</th>
        <th style="width:110px;">時刻</th>
        <th style="width:260px;">センター名</th>
    </tr>
</table>

<input type="button" id="btnTest" value="データを追加" /> <table id="tblResult"border="1px" style="border:1px"> <tr> <th style="width:140px;">伝票No</th> <th style="width:180px;">配送種別</th> <th style="width:80px;">状態</th> <th style="width:110px;">時刻</th> <th style="width:260px;">センター名</th> </tr> </table>

var rowData = new Array();
rowData[0] = "123456789012";
rowData[1] = "クロネコメール便";
rowData[2] = "投函完了";
rowData[3] = "12/24 23:49";
rowData[4] = "001012:東京中央センター";

var rowData = new Array(); rowData[0] = "123456789012"; rowData[1] = "クロネコメール便"; rowData[2] = "投函完了"; rowData[3] = "12/24 23:49"; rowData[4] = "001012:東京中央センター";

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
    //*********************************************************************
    // テーブルへ行の追加を行う
    // eleTable : 行を追加する対象テーブル
    // rowData  : 追加するデータ(配列)
    //*********************************************************************
    addRow = function( eleTable, rowData ) {
        //-------------------------------------
        // 指定された行情報をマークアップする
        //-------------------------------------
        outStr = "<tr>";
        for ( var loopCol = 0; loopCol < rowData.length; loopCol++ ) {
            outStr += "<td>" + rowData[loopCol] + "</td>";
        }
        outStr += "</tr>";
 
        //-----------------------
        // 最後の行に追加
        //-----------------------
        eleTable.append( outStr )
        eleTable.find( "tr:last" ).hide().fadeIn();
    }
</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> //********************************************************************* // テーブルへ行の追加を行う // eleTable : 行を追加する対象テーブル // rowData : 追加するデータ(配列) //********************************************************************* addRow = function( eleTable, rowData ) { //------------------------------------- // 指定された行情報をマークアップする //------------------------------------- outStr = "<tr>"; for ( var loopCol = 0; loopCol < rowData.length; loopCol++ ) { outStr += "<td>" + rowData[loopCol] + "</td>"; } outStr += "</tr>"; //----------------------- // 最後の行に追加 //----------------------- eleTable.append( outStr ) eleTable.find( "tr:last" ).hide().fadeIn(); } </script>

$(document).ready(function(){
    $( "#btnTest" ).click(function () { 
        var rowData = new Array();
        rowData[0] = "123456789012";
        rowData[1] = "クロネコメール便";
        rowData[2] = "投函完了";
        rowData[3] = "12/24 23:49";
        rowData[4] = "001012:東京中央センター";
 
        // テーブルに行を追加
        addRow( $('#tblResult'), rowData );
    });
});

$(document).ready(function(){ $( "#btnTest" ).click(function () { var rowData = new Array(); rowData[0] = "123456789012"; rowData[1] = "クロネコメール便"; rowData[2] = "投函完了"; rowData[3] = "12/24 23:49"; rowData[4] = "001012:東京中央センター"; // テーブルに行を追加 addRow( $('#tblResult'), rowData ); }); });