logo标签列表

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

javascripthtml
4
每当我尝试在表格中添加新单元格时，它不会添加 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>
“undefined” 是指什么？控制台？屏幕？警告框？请具体说明。 - War10ck
当您向表中添加行时，确实需要在<table>中找到一个<tbody>元素将它们附加到。 - Pointy
我可以在newbowler变量后面添加这段代码吗？<input type="button" value="remove" onclick="removePlayer /> - ambonjingness
3个回答
6
尝试更改此行：
td.innerHTML = (" + bowlersName + ");

转化为这样：

td.innerHTML = "(" + bowlersName + ")";
4

有两个问题

  1. 没有名为bowlersName的变量，应该是newBowler
  2. 你的字符串连接方式不正确，(" + bowlersName + ") 应该改为 newBowler

演示：Fiddle

function addBowler() { 
    var table = document.getElementById("bowlerList");
    var emptyRow = document.getElementById("empty");
    if(emptyRow){
        emptyRow.parentNode.removeChild(emptyRow)
    }

    var newBowler = document.getElementsByName('bowlersName')[0].value;
    var tr = document.createElement('tr');
    var td = tr.appendChild(document.createElement('td'));
    td.innerHTML = newBowler;
    table.appendChild(tr);
}
谢谢，它起作用了。但是当我输入新单元格时，如何删除第一个<td></td>元素？我想要删除“您的团队名单为空”的单元格。 - ambonjingness
你可以使用像 document.getElementById("bowlersList).removeChild("empty"); 这样的调用来实现。 - Nomad101
我可以在newbowler变量后面添加这段代码吗？ <input type="button" value="remove" onclick="removePlayer /> - ambonjingness
1
 <table class="table table-striped" id="dashTable">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                </tr>
            </thead>
            <tbody id="task-row">    
            </tbody>
        </table>

现在您可以使用文字字符串插入行：
            data.forEach((element, i) => {
                console.log(element, i)
                var t = document.getElementById("dashTable");
                var r = document.createElement("TR");
                r.innerHTML = `
                                             <tr>
                                                <th scope="row">${i + 1}</th>
                                                <td>${element.text}</td>
                                                <td>${element.createdAt}</td>
                                                <td>${element.completed}</td>
                                            </tr>
                                    `
                t.tBodies[0].appendChild(r)
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接