Question

我现在正在一个文件中创建某种“ Mario拼图”。我设法使用窗口提示创建了一个表。我不知道如何固定高度和宽度，因此它的大小将与顶部的图片相同。稍后，我将提供一个选择图片的选项，并将其插入空白方框中。有什么建议吗？

在用户输入行和列之后：

游玩并做点什么，你明白了

代码：

<!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>

Answer 1

如前所述，请勿使用document.write。在内存中创建元素，然后在准备好时将其追加到DOM。

关于高度和宽度； 1）设置td的内联样式，或2）应用高度和宽度CSS。

请确保无论您在哪里设置尺寸，使其与上面的图像相同。 选项2 是首选方法。

选项＃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;
}

选项＃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;
}

用Javascript创建表格

1 个答案:

选项＃1

选项＃2