-1

アイデアは、テーブルを id="gameTable" で 6 回印刷することです。前に印刷されたものから毎回180px。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.createElementjQuery のようなフレームワークを実行または使用して、テーブルを動的に作成する必要があります。

さらに、同じものを何度も使用しないでくださいid="gameTable"。代わりにクラスを使用する必要がありますclass="gameTable"。同じ ID を複数回使用しているため、スタイルをdocument.getElementById("gameTable")で適用すると、すべてのテーブルに適用されるのではなく、最初に返されたテーブルのみに適用されます。

最後に、絶対配置に頼る必要はありません。このようなシンプルなスタイルで、テーブルを希望どおりに配置できます。

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