使用.appendChild将<TR>添加到<TABLE>

amb*_*ess 3 html javascript

每当我尝试向表格输入新单元格时,它都不会在bowlersName值中添加文本.我的Javascript代码有问题吗?它说"未定义".

<script type="text/javascript">
    /* <![CDATA[ */

    function addBowler() {
        var newBowler = document.getElementsByName('bowlersName').value;
        var tr = document.createElement('tr');
        var td = tr.appendChild(document.createElement('td'));
        td.innerHTML = newBowler;
        document.getElementById("bowlerList").appendChild(tr);
    }
    /* ]]> */
</script>
</head>
<body>
    <!-- HEADER 1 & 2 -->
    <h1>Central Valley Lanes</h1>
    <h2>2008 Bowling Teams</h2>
    Bowler's name <input type="text" name="bowlersName" size="15" /><input type="button" value="Add Bowler" onclick="addBowler()" />

    <h2>Team Roster</h2>   
    <form action="FormProcessor.html" method="get">
        <table border="1" id="bowlerList">
            <tr>
                <td id="empty">Your team roster is empty</td>
            </tr>
        </table>
        <br />
        <input type="button" value="Submit Roster" />
    </form>
</body>
Run Code Online (Sandbox Code Playgroud)

Hug*_*sco 6

尝试更改此行:

td.innerHTML = (" + bowlersName + ");
Run Code Online (Sandbox Code Playgroud)

对此:

td.innerHTML = "(" + bowlersName + ")";
Run Code Online (Sandbox Code Playgroud)