将<TR>添加到<TABLE>与.appendChild

每次我尝试输入一个新的单元格到表格中时，它不会在bowlersName值中添加文本。我的Javascript代码有问题吗？它说“未定义”。将<TR>添加到<TABLE>与.appendChild

<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>

来源

2013-04-29 ambonjingness

说什么 “未定义”？控制台？屏幕？一个警告框？请更具体一些。 – War10ck 2013-04-29 00:41:59

将行追加到表中时，您确实需要在“

”中找到''元素以将它们追加到表中。 – Pointy2013-04-29 00:44:53

可以在newbowler变量之后添加此代码吗？ – ambonjingness 2013-04-29 00:56:46

回答

试图改变这一行：

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

要这样：

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

来源

2013-04-29 00:40:20

有两个问题

没有名为bowlersName变量，它应该是newBowler
你的字符串连接是错误的，(" + 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); 
}

来源

2013-04-29 00:41:27

谢谢，它工作。但我怎么删除第一个元素，当我进入一个新的单元格？我想删除”你的团队名册是空的“cell。 – ambonjingness 2013-04-29 00:43:19

你可以用document.getElementById（”bowlersList）.removeChild（“empty”）; – Nomad101 2013-04-29 00:45:39

@ambonjingness查看更新 – 2013-04-29 00:46:46

将<TR>添加到<TABLE>与.appendChild

回答

相关问题