jQuery插件開發2

<script type="text/javascript" src="resource/theme1/my.js"></script>
    <script type="text/javascript">
    //插件開發最常用的方式
    $(function()
            {
            $("#t").myTable({"data":[[1,2,3],[4,5,6]]});
        });
    </script>
    </head>
    <body>
        <table id="t" border="1" >
            <thead>
                <th>A</th>
                <th>B</th>
                <th>C</th>
            </thead>
            <tbody>
            </tbody>
        </table>

    </body>


jQuery開發的插件;路徑  resource/theme1/my.js

(
        function($)
        {
            $.fn.myTable = function(settings)
            {
                var mydefault = {"data":[["","",""]]};

              //判斷參數是不是爲空,賦默認的值

                if(settings != null)
                {
                    $.extend(mydefault,settings);
                }
                
                var args = mydefault.data;
                var tbody  = this.children("tbody");

                //二維數組的展現
 

               var tab ="";

                //展現行

                for(var i = 0; i < args.length; i++)
                {
                    tab +="<tr>";

                            //展現列
                            for(var j=0; j<args[i].length; j++)
                            {
                                tab +="<td>";

                                //把拿到的數據放到對應的位置上

                                tab +=args[i][j];
                                tab +="</td>";
                            }
                            
                    tab +="</tr>";    
                }
                tbody.html(tab);
            };
        }
    )(jQuery);

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章