-1

想法是打印 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>
4

1 回答 1

0

您的代码有几个问题。首先，您不应该依赖document.write，而应该document.createElement使用或使用像 jQuery 这样的框架来动态创建表。

此外，您不应该id="gameTable"一遍又一遍地使用相同的。您应该改为使用类，例如class="gameTable". 因为您多次使用相同的 id，所以当您使用 应用样式时document.getElementById("gameTable")，您不会将它们应用到所有表格，而只会应用到返回的第一个表格。

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

.gameTable
{
    float: left;
    margin-right: 180px;
}
于 2013-03-28T20:21:49.437 回答