jQuery绘制网格效果代码实例
分类:实例代码
分享一段代码实例,它利用jQuery实现了绘制网格的效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type = "text/css"> body{ background:#000000; } #antzone{ width:380px; height:380px; margin:100px auto; background:#4b4b4b; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type = "text/javascript"> $(function(){ var table = document.createElement("table"); var tbody = document.createElement("tbody"); table.style.borderCollapse = "collapse"; for(var i = 0;i<20;i++){ var tr = document.createElement("tr"); for(var j = 0;j<20;j++){ var td = document.createElement("td"); td.style.border = "1px solid #dfdfdf"; td.style.padding = "9px"; tr.appendChild(td); } table.appendChild(tr); } document.getElementById("antzone").appendChild(table); }) </script> </head> <body> <div id = "antzone"></div> </body> </html>
jQuery绘制网格效果代码实例,这样的场景在实际项目中还是用的比较多的,关于jQuery绘制网格效果代码实例就介绍到这了。
jQuery绘制网格效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。