Javascript 初学者：试图用do while循环实现我的想法时，我的头都碎了_Javascript_Html_While Loop

Javascript 初学者：试图用do while循环实现我的想法时，我的头都碎了

javascript html

Javascript 初学者：试图用do while循环实现我的想法时，我的头都碎了,javascript,html,while-loop,Javascript,Html,While Loop,想法是将id=“gameTable”的表格打印6次。每次180像素，与之前打印的相同。使用CSS属性。不起作用，我不知道为什么。我觉得这是一件我看不到的简单事情。但是什么呢 <HTML> <HEAD> <link rel="stylesheet" type="text/css" href="styleTable.css"> <SCRIPT LANGUAGE="JavaScript"> function newPage(){ document

想法是将id=“gameTable”的表格打印6次。每次180像素，与之前打印的相同。使用CSS属性。不起作用，我不知道为什么。我觉得这是一件我看不到的简单事情。但是什么呢

<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="styleTable.css">
<SCRIPT LANGUAGE="JavaScript">
function newPage(){
    document.open();
    document.write('<HTML>');
    document.write('<head>');
    document.write('</head>');
document.write('<body>');
var i = 0;
function schedule () {
/* print the table */
document.write('<table id="gameTable">');
document.write('<tr>');
document.write('<td id="gameCellTeamNameHost">Arsenal</td>');
document.write('<td id="gameCellTeamNameDash"> - </td>');
document.write('<td id="gameCellTeamNameGuest">Chelsea</td>');
document.write('</tr>');
document.write('<tr>');
document.write('<td id="gameCellScoreHost">0</td>');
document.write('<td id="gameCellScoreSemicolon">:</td>');
document.write('<td id="gameCellScoreGuest">3</td>');
document.write('</tr>   ');
document.write('</table>');
/*Style*/
document.getElementById("gameTable").style.height = "50px"; 
document.getElementById("gameTable").style.width = "180px"; 
document.getElementById("gameTable").style.border = "1px";
document.getElementById("gameTable").style.borderStyle = "solid";   
document.getElementById("gameTable").style.borderColor = "black";
document.getElementById("gameTable").style.padding = "5px"; 
document.getElementById("gameTable").style.backgroundColor = "red"; 
document.getElementById("gameTable").style.position = "absolute";
document.getElementById("gameTable").style.top = "110px";
/* this is the line i used var i */
document.getElementById("gameTable").style.left = (i+"px");
/* -----------------*/
document.getElementById("gameCellTeamNameHost").style.textAlign = "left";
document.getElementById("gameCellTeamNameHost").style.verticalAlign = "top";
document.getElementById("gameCellTeamNameHost").style.height = "24px";
document.getElementById("gameCellTeamNameHost").style.width = "80px";
document.getElementById("gameCellTeamNameGuest").style.textAlign = "right";
document.getElementById("gameCellTeamNameGuest").style.verticalAlign = "top";
document.getElementById("gameCellTeamNameGuest").style.height = "24px";
document.getElementById("gameCellTeamNameGuest").style.width = "80px";
}
 do {           
    schedule();
        i +=180;
        }
        while (i < 1081);

document.write('</body>');
document.write('</HTML>');
document.close();
   }
   </SCRIPT>
   </HEAD>  
   <BODY>
   <INPUT TYPE="button" VALUE="New Season" ONCLICK="newPage()">
   </BODY>
   </HTML>


函数newPage（）{
document.open（）；
文件。写（“”）；
文件。写（“”）；
文件。写（“”）；
文件。写（“”）；
var i=0；
功能表（）{
/*打印表格*/
文件。写（“”）；
文件。写（“”）；
文件。书写（“军火库”）；
文件。写（'-'）；
文件。书写（‘切尔西’）；
文件。写（“”）；
文件。写（“”）；
document.write（'0'）；
文件。写（“：”）；
文件。写（'3'）；
文件。写（“”）；
文件。写（“”）；
/*风格*/
document.getElementById（“游戏桌”）.style.height=“50px”；
document.getElementById（“gameTable”）.style.width=“180px”；
document.getElementById（“gameTable”）.style.border=“1px”；
document.getElementById（“gameTable”）.style.borderStyle=“solid”；
document.getElementById（“游戏桌”）.style.borderColor=“黑色”；
document.getElementById（“gameTable”）.style.padding=“5px”；
document.getElementById（“gameTable”）.style.backgroundColor=“红色”；
document.getElementById（“gameTable”）.style.position=“绝对”；
document.getElementById（“gameTable”）.style.top=“110px”；
/*这是我使用的变量i的行*/
document.getElementById（“gameTable”）.style.left=（i+“px”）；
/* -----------------*/
document.getElementById（“gameCellTeamNameHost”）.style.textAlign=“left”；
document.getElementById（“gameCellTeamNameHost”）.style.verticalAlign=“top”；
document.getElementById（“gameCellTeamNameHost”）.style.height=“24px”；
document.getElementById（“gameCellTeamNameHost”）.style.width=“80px”；
document.getElementById（“gameCellTeamNameGuest”）.style.textAlign=“right”；
document.getElementById（“gameCellTeamNameGuest”）.style.verticalAlign=“top”；
document.getElementById（“gameCellTeamNameGuest”）.style.height=“24px”；
document.getElementById（“gameCellTeamNameGuest”）.style.width=“80px”；
}
做{
附表（）；
i+=180；
}
而（i<1081）；
文件。写（“”）；
文件。写（“”）；
document.close（）；
}

您的代码有几个问题。首先，您不应该依赖于

document.write

，而是应该执行

document.createElement

或使用类似jQuery的框架来动态创建表

此外，您不应反复使用相同的

id=“gameTable”

。您应该改为使用类，例如，

class=“gameTable”

。因为您不止一次使用同一个id，所以当您使用

document.getElementById（“gameTable”）

应用样式时，并不是将它们应用到所有表，而是只应用到返回的第一个表

最后，您不需要依赖绝对定位，像这样的简单样式将按照您希望的方式对齐表格：

.gameTable
{
    float: left;
    margin-right: 180px;
}

看起来不错吧？页面加载后不能使用document.write。创建一个div并使用innerHTMLAlso将html、head和body标记写入一个已经有这些标记的文档是毫无意义的。你让我头脑清醒了很多。不幸的是，我还不知道JQuery。但我会看看innerHTML。提供给您的CSS代码并没有改变这种情况。我想插入尽可能多的表，以便一个接一个地插入。这就是我使用JS函数的原因。好吧，我会尝试更多地使用它。基本上，我想重复这个html代码阿森纳-切尔西0:3，重复次数与我想要的一样多，例如连续6行，4行。有人能帮我吗，或者需要更多的信息吗？