js怎么實現輸入n就顯示n×n的宮格?
我要做一個大俠
2016-03-30 19:13:26
TA貢獻1036條經驗 獲得超461個贊
<!doctype?html> <html> <head> ????<meta?charset="UTF-8"> ????<title>Document</title> ????<style> ????????table{ ????????????border:?1px?solid?#ccc; ????????} ????????table?td{ ????????????padding:?5px; ????????????border:?1px?solid?#ccc; ????????} ????</style> </head> <body> <input?type="text"?id="input"?placeholder="輸入行數"><input?type="button"?id="button"?value="創建"> <div?id="tableBox"> </div> <script> ????var?box?=?document.getElementById('tableBox'); ????var?input?=?document.getElementById('input'); ????function?createTable()?{ ????????var?n?=?parseInt(input.value); ????????if(!n){ ????????????return; ????????} ????????var?tableStr?=?'<table>' ????????for(var?i?=0;i<n;i++){ ????????????tableStr+='<tr>' ????????????for(var?j=0;j<n;j++){ ????????????????tableStr+='<td>'+(i+1)+(j+1)+'</td>'; ????????????} ????????????tableStr+='</tr>' ????????} ????????tableStr+='</table>'; ????????box.innerHTML?=?tableStr; ????} ????document.getElementById('button').onclick?=?createTable; </script> </body> </html>
也不知道你到底想要什么,就簡單用table拼了一個
舉報