Create table with Javascript

Question

I'm creating some kind of "Mario puzzle" all in one file for now. I managed to create a table using window prompt. I don't know how to make height and width fixed so it will be the same size as the pictures on the top. Later on, I will make an option to select a picture and insert it in the blank square. Any advice please?

After the user inputs rows and columns:

Playing around and making something, you get the point

Code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Mario</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            table,td {
                border: 1px solid grey;
                border-collapse: collapse;
                margin: 10px;
                background-color: silver;
            }

            img {
                display: block;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td><img src="images/sprite1.gif" alt="sprite1.gif"></td>
                <td><img src="images/sprite2.gif" alt="sprite2.gif"></td>
                <td><img src="images/sprite3.gif" alt="sprite3.gif"></td>
                <td><img src="images/sprite4.gif" alt="sprite4.gif"></td>
                <td><img src="images/sprite5.gif" alt="sprite5.gif"></td>
                <td><img src="images/sprite6.gif" alt="sprite6.gif"></td>
                <td><img src="images/sprite7.gif" alt="sprite7.gif"></td>
                <td><img src="images/sprite8.gif" alt="sprite8.gif"></td>
                <td><img src="images/sprite9.gif" alt="sprite9.gif"></td>
                <td><img src="images/sprite10.gif" alt="sprite10.gif"></td>
                <td><img src="images/sprite11.gif" alt="sprite11.gif"></td>
                <td><img src="images/sprite12.gif" alt="sprite12.gif"></td>
                <td><img src="images/sprite13.gif" alt="sprite13.gif"></td>
                <td><img src="images/sprite14.gif" alt="sprite14.gif"></td>
                <td><img src="images/sprite15.gif" alt="sprite15.gif"></td>
                <td><img src="images/sprite16.gif" alt="sprite16.gif"></td>
            </tr>
        </table>

        <script type="text/javascript">

            var r = window.prompt("Please enter rows:"); //vrstica tr
            while(r<5 || r>20){
                r = window.prompt("Wrong, enter a number between 5 and 20:"); 
            }

            var c = window.prompt("Please enter columns:"); //stoplec td
            while(c<10 || c>40){
                c = window.prompt("Wrong, enter a number between 10 and 40:");
            }

            document.write('<table>');
            for(i=1;i<=r;i++) {
                document.write("<tr>");
                for(j=1;j<=c;j++) {
                    document.write("<td>"+" "+"</td>");
                }
                document.write("</tr>");
            }   
            document.write('</table>');

        </script>

    </body>
</html>

In general, using a canvas library like pixijs is a better way to go about creating games like this. Also, using document.write is frowned upon. — Neil VanLandingham
– Neil VanLandingham, Commented Nov 30, 2018 at 21:33
@Weft I just started with JavaScript so I'm using what I know and find. Will look into that library. Thanks. — user8916243
– user8916243, Commented Nov 30, 2018 at 21:36
It's considered better practice to use appendChild to a referenced HTML element instead of using write calls directly to the document. w3schools.com/jsref/met_node_appendchild.asp — Tim Hunter
– Tim Hunter, Commented Nov 30, 2018 at 21:42
As for your question regarding the height and width, you should be able to set that using CSS styling tags. Give every <td> a class like <td class='gridSpot'></td> and then in your head add <style> .gridSpot { width: 10px; height: 10px; } </style> to set the width and height of the elements. — Tim Hunter
– Tim Hunter, Commented Nov 30, 2018 at 21:49
document.write isn't "frowned upon", it's literally a function you should never use. It does not do what you think it does. (it does NOT 'just write some data into your document') — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Nov 30, 2018 at 22:04

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

As mentioned, do not use document.write. Create the elements in memory and then append to the DOM when ready.

As for height and width; 1) set the inline style of the tds or 2) apply height and width CSS.

Make sure that wherever you set the dimensions, to make it the same as the images above. Option #2 is the preferred approach.

Option #1

function el( tagName ) {
  return document.createElement( tagName );
}

var rows  = 5;
var cols  = 10;
var table = el( 'table' );

for ( var i = 0; i < rows; i++ ) {

  var tr = el( 'tr' );
  
  for ( var j = 0; j < cols; j++ ) {
  
    var td = el( 'td' );

    td.style.width  = '20px';
    td.style.height = '20px';

    tr.appendChild( td );
    
  }
  
  table.appendChild( tr );
  
}

document.body.appendChild( table );

td {
  border: 1px solid #ccc;
}

Option #2

function el( tagName ) {
  return document.createElement( tagName );
}

var rows  = 5;
var cols  = 10;
var table = el( 'table' );

for ( var i = 0; i < rows; i++ ) {

  var tr = el( 'tr' );
  
  for ( var j = 0; j < cols; j++ ) {
    tr.appendChild( el( 'td' ) );        
  }
  
  table.appendChild( tr );
  
}

document.body.appendChild( table );

td {
  border: 1px solid #ccc;
  width: 20px;
  height: 20px;
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 30, 2018 at 21:43

hungerstar

21.8k6 gold badges52 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user8916243 Over a year ago

I was playing around trying what would work best and the second option is best as you mentioned. Thank you. Can you direct me in the right way of clicking the upper picture then clicking an empty square and the picture would show up there?

hungerstar Over a year ago

To start I would add a delegated event handler to the row of upper pictures. That handler would then record which picture got clicked. Then, when the user clicks an empty square, the picture is applied to the selected square. Exactly how the picture is applied will depend on the project and your preference. Going with what has been established in the answer above, a basic example might look like this: jsfiddle.net/myn0qfu4/1. The images are background images applied via CSS class.

Collectives™ on Stack Overflow

Create table with Javascript

1 Answer 1

Option #1

Option #2

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Option #1

Option #2

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related