jQuery插件开发二

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);

jQuery插件开发二

相关推荐