How to create a specific X*X size table? (Battleship game) (HTML, CSS, JS)


Tags: javascript,jquery,html,css

Problem :

I have an assignment to create a battleship game, with 3x3 - 10x10 grid. My current idea would be to create a grid with a click of a button, or atlest change the current size with a click of a button. However Im a beginner and its really difficult to find any simple or understandable advice. So I thought I'd ask here explaining my personal situation.

(I pasted the following code pieces into pastebin since some indentation and formating seems to dissapear here. http://pastebin.com/ZL3cWt8U)

I'm trying to recreate this with a javascript function.

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>

Here is the function im trying to work with. Im using a dropdown menu wich has 3x3 - 10x10 values in it. Pressing a button executes the function.

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 neccesary, oops
for (i = 0; i <= gridsize-1; i++) { //for loop to create the table
    $("#tabel_here").append(e);

}
}   

Now, this far it just creates a vertical X x 1 table, just a column. As far as I know, the solution would be to loop this:

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

As much as needed(*gridsize) inbetween the row div. This is where I'm stuck because I cant seem make it work whitout breaking the code.

Also, if there are simpler ways to make this happen let me know, this might be a dumb way to solve the problem, but I just started learning html, css and js.

Now I would like to stress, that this will be used to make a battleship game, so it needs to have as much functionality as possible, this is why I considered using divs as they seem to be the most universal and flexible.



Solution :

Try this:

 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>

This is easy and flexibile function. With this, you can easy setup grid just changing values.

DEMO


    CSS Howto..

    How do I programmatically change the CSS link for HTML files in C#?

    How can I know if I am clicking on a transparent or non-transparent part of a png on a web page?

    How to add a fancy frame for an img if you only know its width?

    How to place a div right below another div?

    How to output CSS files to single directory from several input directories?

    How to remove gap between elements when using CSS3 table-row/header/footer-group in Firefox?

    Compiling Bootstrap in LESS - How can I have a different navbar height for mobile?

    how to base a css rule on inherited value of dir attribute

    CSS How to attach input box to bottom of divider window

    how to implement “blog” page in HTML/CSS? [closed]

    How to properly position DIVS on a page to

    How to set a CSS property with a variable in JQuery?

    How to have a box increase its size based on its content?

    Using vi, how can I remove all lines that contain [searchterm]?

    How to give border to any element using css without adding border-width to the whole width of element?

    How to access an svg inner id and have CSS change the fill color of that id?

    css - how to change image source by its id?

    How do I put 2 columns beside each other

    How to select the first type of child of a particular CSS using CSS selector [duplicate]

    How to avoid width calculation, can this be done with just CSS?

    How to apply same event to multiple buttons?

    How to display inline with rails?

    How can I incorporate a slideshow into HTML?

    How to to make a gap between rows in FlowPanel in Css in Gwt?

    How do I set a cell background colour based on its contents using PHP after reading values from MySQL?

    how to set css property of one class from another class

    jquery/css how to rescale and crop a large image to fit my display div?

    How to create a dynamic box with shadow - using PNG pictures

    how to target individual elements in grails g:render

    how to prevent child element from widening parent element's width in css