Question

我遇到的问题是每当我尝试循环newRow()函数时，我的网页都没有做任何事情。我尝试过onload但它仍然无法正常工作。我也用于循环;也没有工作。该表仍然是空的，我可以添加另一行的唯一方法是单击＆＃34; New Row＆＃34;按钮。

以下是my-webpage.html：

<!doctype html>

<html>
    <head>
        <title>
            My First Webpage
        </title>
    </head>
    <body>
    <script type="text/javascript" src="tables.js">
    </script>
    <h2>Game Development Research</h2>
    <h6>Compiled by Reuben Unicruz</h6>
        <hr>
    <h3><u><em>Games Analysis</em></u></h3>
    <h4>Halo 4</h4>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/HMOWXHlxUM0" frameborder="0" allowfullscreen></iframe>
    <br/>
        <hr>
    <h3><u><em>Game Mechanics</em></u></h3>
    <h4>First Person Shooters</h4>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/13iMO9s-q0c" frameborder="0" allowfullscreen></iframe>
    <br/>
    <h4>Jumping in 2D</h4>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/yuRRPT-Isp4" frameborder="0" allowfullscreen></iframe>
        <hr>
    <h3>Game Ratings</h3>
    <form>
        <table id="GameRating">
            <thead>
                <th>Title</th><th>Genre</th><th>Score</th>
            </thead>
        </table>
        <input type="button" value="New Row" onClick="newRow()"></input>
        <input type="button" value="Delete Last Row" onClick="deleteLastRow()"></input>
    </form>
    </body>
</html>

以下是tables.js文件：

function newRow()
{

    var table = document.getElementById("GameRating");

    var row = table.insertRow(table.rows.length);

    var title = row.insertCell(0);
    var genre = row.insertCell(1);
    var score = row.insertCell(2);

    title.innerHTML = "<input type=\"text\"></input>";
    genre.innerHTML = "<select><option>Platformer</option><option>FPS</option><option>TPS</option></select>";
    score.innerHTML = "<input type=\"text\"></input>";
}

function deleteLastRow()
{
    var table = document.getElementById("GameRating");

    table.deleteRow(table.rows.length - 1);
}

function printHello()
{
    document.write("HELLO!!!<br/>")
}

for (i = 0; i < 3; i++)
{
    newRow();
}

为什么不起作用？顺便说一下，你链接到的答案与我的情况不同，因为如果我没有调用newRow()函数并使用document.write代替，for循环将起作用{{1功能有效。此外，脚本已正确安排。

Answer 1

检查此代码段。这是你想要实现的吗？

＆＃13;

function newRow()
{

    var table = document.getElementById("GameRating");
    var row = table.insertRow(0);

    var title = row.insertCell(0);
    var genre = row.insertCell(1);
    var score = row.insertCell(2);

    title.innerHTML = "<input type=\"text\"></input>";
    genre.innerHTML = "<select><option>Platformer</option><option>FPS</option><option>TPS</option></select>";
    score.innerHTML = "<input type=\"text\"></input>";
}

＆＃13;

<head>
        <title>
            My First Webpage
        </title>
    </head>
    <body>
    <script type="text/javascript" src="tables.js">
    </script>
    <h2>Game Development Research</h2>
    <h6>Compiled by Reuben Unicruz</h6>
        <hr>
    <h3><u><em>Games Analysis</em></u></h3>
    <h4>Halo 4</h4>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/HMOWXHlxUM0" frameborder="0" allowfullscreen></iframe>
    <br/>
        <hr>
    <h3><u><em>Game Mechanics</em></u></h3>
    <h4>First Person Shooters</h4>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/13iMO9s-q0c" frameborder="0" allowfullscreen></iframe>
    <br/>
    <h4>Jumping in 2D</h4>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/yuRRPT-Isp4" frameborder="0" allowfullscreen></iframe>
        <hr>
    <h3>Game Ratings</h3>
    <form>
        <table id="GameRating">
            <thead>
                <th>Title</th><th>Genre</th><th>Score</th>
            </thead>
        </table>
        <input type="button" value="New Row" onClick="newRow()"></input>
        <input type="button" value="Delete Last Row" onClick="deleteLastRow()"></input>
    </form>
    </body>

＆＃13;

Javascript循环中的函数调用无法正常工作

1 个答案: