(function($){ $.fn.newTable = function(){ //var thead = $("<thead></thead>"); var tr = $("<tr></tr>"); var tbody = $("<tbody></tbody>"); var tab = $("<table></table>"); for(var i=0 ;i<5;i++){ var td = $("<td >aaa</td>"); tr.append(td); } tbody.append(tr); tab.append(tbody); $(this).append(tab); } })(jQuery);
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript" src="create.table.js"></script> <style type="text/css"> table{ border: 10px solid #000; width:100%; border-collapse: collapse; } table td{ border: 1px solid #000; border-color: red; } </style> <script type="text/javascript"> $(function(){ $("#table").newTable(); //newTable($("#table")); }); </script> </head> <body> <div id ="table"></div> </body> </html>