javascript - 如何创建一个特定的X*X尺寸表？ (战舰游戏)(HTML、CSS、JS)

Question

我有一项任务是创建一个具有 3x3 - 10x10 网格的战舰游戏。 我目前的想法是通过单击按钮创建网格，或者至少通过单击按钮更改当前大小。但是，我是初学者，很难找到任何简单或易于理解的建议。所以我想我应该在这里问解释我的个人情况。

(我将以下代码片段粘贴到 pastebin 中，因为一些缩进和格式似乎在这里消失了。http://pastebin.com/ZL3cWt8U)

我正在尝试使用 JavaScript 函数重新创建它。

css:

.cell {border-right: 1px solid #000000; border-bottom: 1px solid #000000; float: left; width: 30px; height: 30px;}
.row {clear: both; overflow: hidden;}
.table {border-left: 1px solid #000000; border-top: 1px solid #000000;}

HTML:

<div class="table">
<div class="row">
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
</div>
<div class="row">
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
</div>
<div class="row">
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
</div>
<div class="row">
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
</div>
<div class="row">
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
</div>

这是我正在尝试使用的函数。我正在使用一个下拉菜单，其中包含 3x3 - 10x10 的值。按下按钮执行功能。

function genTable(gridsize) {

var e = '<div class="table"><div class="row"><div class="cell">&nbsp;</div></div></div>'

var value = $("#option").val(); //gets value from button press (between 3-10)
gridsize = value; // this isn't really necessary, oops
for (i = 0; i <= gridsize-1; i++) { //for loop to create the table
    $("#tabel_here").append(e);

}
}   

现在，到目前为止，它只是创建了一个垂直的 X x 1 表格，只是一列。 据我所知，解决方案是循环这个:

<div class="cell">&nbsp;</div>

在行 div 之间尽可能多(*gridsize)。这就是我卡住的地方，因为我似乎无法在不破坏代码的情况下让它工作。

此外，如果有更简单的方法来实现这一点，请告诉我，这可能是解决问题的愚蠢方法，但我刚刚开始学习 html、css 和 js。

现在我想强调一下，这将用于制作战舰游戏，因此它需要尽可能多的功能，这就是为什么我考虑使用 div 的原因，因为它们似乎是最通用和最灵活的。

Answer 1

试试这个:

 var createGrid=function(x,y){
    	var arrY = new Array(),
    		arrX,
            container = $(".table");
    	for(var iy=0; iy<y; iy++){
    		arrX = new Array();
    		for(var ix=0; ix<x; ix++){
    			arrX[ix]='<div class="cell">&nbsp;</div>';
    		}
    		arrY[iy]='<div class="row">'+arrX.join("\r\n")+'</div>';
    	}
    	container.append(arrY.join("\r\n"));
    };
// call function
    createGrid(10,10);

.cell {display:table-cell; 
    border-right: 1px solid #000000; 
    border-bottom: 1px solid #000000; 
    width: 30px; height: 30px;
}
.row {
    display:table-row; 
    clear: both; 
    overflow: hidden;
}
.table {
    display:table; 
    border-left: 1px solid #000000;
    border-top: 1px solid #000000;
    display:table;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="table"></div>

这是一个简单而灵活的功能。有了这个，您可以轻松设置网格，只需更改值。

DEMO