读书人

jQuery插件开发二

发布时间: 2013-10-07 19:41:22 作者: rapoo

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

读书人网 >Web前端

热点推荐