Question

我的应用程序“当点击一个按钮时，它应该在表格中创建一个新的文本字段”。所以我这样做了，它也不起作用。那么下面的代码片段中可能存在什么问题。

<html>

<script type="text/javascript" language="javascript">
    var newtr=document.createElement("tr");
    var newtd=document.createElement("td"); 
    var output="<input type=\"textfield\"";
    newtd.innerHtml=output;
    newtr.appendChild(newtd);
    function create_row()
    {
        document.getElementById("table1").appendChild(newtr);
    }
</script>


<body>
    <table id="table1">
        <tr>
            <td>
                <input type-"textfield" name="tfield">
            </td>
        </tr>
        <tr>
            <td> <input type="button" name="button" value="new row" onclick="create_row();">
        </tr>
    </table>

</body>
</html>

我正在使用IE7。

Answer 1

为了在IE中完成这项工作，您应首先创建一个TBODY，然后在TBODY中附加TR。如果你不这样做，IE就无法呈现表内容，HTML部分将会成功创建，但不会在页面上看到。

因此，您应修改脚本以将TR附加到TBODY

Answer 2

关于您的代码的几点评论：

您需要正确关闭代码：var output="<input type=\"textfield\""无效
没有定义输入type="textfield"
设置给定DOM元素的html的属性称为innerHTML而不是innerHtml
每次点击按钮时都需要创建一个新的tr元素，因此这应该在create_row函数
您的HTML中有拼写错误：<input type-"textfield" name="tfield">。这应该更改为<input type="text" name="tfield" />
您缺少文档中的head部分

我尝试过清理你的代码了一下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Test</title>
    <script type="text/javascript">
    function create_row()
    {
        var newtr = document.createElement('tr');
        var newtd = document.createElement('td');     
        var output = '<input type="text" name="test" />';
        newtd.innerHTML = output;
        newtr.appendChild(newtd);
        document.getElementById('table1').appendChild(newtr);
    }
    </script>
</head>
<body>
    <table id="table1">
        <tr>
            <td>
                <input type="textfield" name="tfield" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" name="button" value="new row" onclick="create_row();" />
            </td>
        </tr>
    </table>
</body>
</html>

更新：

正如IE7中的Guffa和Serkan答案所指出的，需要使用tbody部分：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Test</title>
    <script type="text/javascript">
    function create_row()
    {
        var newtr = document.createElement('tr');
        var newtd = document.createElement('td');     
        var output = '<input type="text" name="test" />';
        newtd.innerHTML = output;
        newtr.appendChild(newtd);
        document.getElementById('tablebody').appendChild(newtr);
    }
    </script>
</head>
<body>
    <table id="table1">
        <tbody id="tablebody">
            <tr>
                <td>
                    <input type="textfield" name="tfield" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" name="button" value="new row" onclick="create_row();" />
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Answer 3

您缺少头标。
脚本应位于head标签中。
输入元素的html代码缺少结束括号。
“textfield”类型不存在。
在函数外部创建元素时，代码只能运行一次。
方法是innerHTML，而不是innerHtml。
您必须将行添加到tbody元素，而不是表本身。

我已经在Firefox 3和IE 8中对此进行了测试，它可以运行：

<html>
<head>
<script type="text/javascript">
   function create_row() {
      var newtr=document.createElement("tr");
      var newtd=document.createElement("td");     
      var output="<input type=\"text\">";
      newtd.innerHTML=output;
      newtr.appendChild(newtd);
      document.getElementById("table1body").appendChild(newtr);
   }
</script>

</head>
<body>
   <table>
      <tbody id="table1body">
      <tr>
         <td>
            <input type-"textfield" name="tfield">
         </td>
      </tr>
      <tr>
         <td> <input type="button" name="button" value="new row" onclick="create_row();">
      </tr>
      </tbody>
   </table>

</body>
</html>

在Javascript中运行时创建表？

3 个答案: