admin管理员组

文章数量:1350085

I my application "When a button is clicked it should create a new text field in the table". So i have done like this and its not working as well. So what could be the problem in the following snippet.

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

I am using IE7.

I my application "When a button is clicked it should create a new text field in the table". So i have done like this and its not working as well. So what could be the problem in the following snippet.

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

I am using IE7.

  • javascript
  • html
Share Improve this question asked Dec 12, 2009 at 12:24 i2ijeyai2ijeya 16.4k18 gold badges66 silver badges73 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 5

In order to make this work in IE you should create a TBODY first then append the TRs in TBODY. If you don't do this IE cannot render the table content, HTML part will be created succesffully but it will not be seen on the page.

So you should modify your script to append TRs into the TBODY

Few remarks about your code:

  1. You need to properly close tags: var output="<input type=\"textfield\"" is not valid
  2. There's no input type="textfield" defined
  3. The property to set the html of a given DOM element is called innerHTML and not innerHtml
  4. You need to create a new tr element every time the button is clicked, so this should be inside the create_row function
  5. You have a typo in your HTML: <input type-"textfield" name="tfield">. This should be changed to <input type="text" name="tfield" />
  6. You are missing a head section in your document

I've tried cleaning your code a bit:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3/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>

UPDATE:

As pointed out by Guffa and Serkan answers in IE7 a tbody section needs to be used:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3/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>
  • You are missing a head tag.
  • The script should be in the head tag.
  • The html code for the input element is missing a closing bracket.
  • The type "textfield" does not exist.
  • The code only works once as you create the elements outside the function.
  • The method is innerHTML, not innerHtml.
  • You have to add the row to the tbody element, not the table itself.

I have tested this in Firefox 3 and IE 8 and it works:

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

本文标签： htmlRuntime creation of tables in JavascriptStack Overflow

版权声明：本文标题：html - Runtime creation of tables in Javascript? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743870800a2553431.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。