Home/ Questions/Q 536563
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T09:50:06+00:00

I my application When a button is clicked it should create a new text

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    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.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>
    • 0