用Javascript创建表格 [英] Create table with Javascript
问题描述
我现在正在一个文件中创建某种"Mario拼图". 我设法使用窗口提示符创建了一个表.我不知道如何固定高度和宽度，因此它的尺寸将与顶部的图片相同. 稍后，我将提供一个选择图片的选项，并将其插入空白方框中.有什么建议吗?
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
代码:
<!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>
推荐答案
如上所述，请勿使用document.write.在内存中创建元素，然后在准备好时将其追加到DOM.
As mentioned, do not use document.write. Create the elements in memory and then append to the DOM when ready.
关于高度和宽度； 1)设置td的内联样式，或2)应用高度和宽度CSS.
As for height and width; 1) set the inline style of the tds or 2) apply height and width CSS.
请确保无论您在哪里设置尺寸，使其与上面的图像相同. 选项2 是首选方法.
Make sure that wherever you set the dimensions, to make it the same as the images above. Option #2 is the preferred approach.
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;
}
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创建表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
