CODEWITHSUNDEEP
javascriptcsshtml-table
user8916243
user8916243

Reputation:

Create table with Javascript

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: enter image description here

Playing around and making something, you get the point enter image description here

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>

Upvotes: 1

Views: 84

Answers (1)

hungerstar
hungerstar

Reputation: 21725

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;
}

Upvotes: 1

Related Questions