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拼了一個
舉報