ansaurus

Question

Runtime creation of tables in Javascript?

Answer 1

+4 A:

Few remarks about your code:

You need to properly close tags: var output="<input type=\"textfield\"" is not valid
There's no input type="textfield" defined
The property to set the html of a given DOM element is called innerHTML and not innerHtml
You need to create a new tr element every time the button is clicked, so this should be inside the create_row function
You have a typo in your HTML: <input type-"textfield" name="tfield">. This should be changed to <input type="text" name="tfield" />
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"&gt;
<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"&gt;
<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>

Darin Dimitrov 2009-12-12 12:28:38

But still I didn't got the result!!!!

i2ijeya 2009-12-12 12:42:22

I've tested this on Google Chrome, Firefox 3.5 and IE8 and it works. Don't have IE7 to test. Did you get some error when testing under IE7?

Darin Dimitrov 2009-12-12 12:46:08

No i dont have any. I've also tried out this in Firefox 3.0.

i2ijeya 2009-12-12 12:51:08

So nothing happens when you click on the button?

Darin Dimitrov 2009-12-12 12:53:07

Sorry Darin, Its working fine in Firefox 3.0... I've missed some of the things.. But it is still not working in IE 7 and not showing any errors. If I clicked down the button nothing happens!!!

i2ijeya 2009-12-12 13:00:19

Could by any chance javascript be disabled in IE7 or have you noticed a yellow bar at the top saying `To help protect your security, Internet Explorer has restructed this web page from running scripts or ActiveX controls that could access your computer.`?

Darin Dimitrov 2009-12-12 13:09:29

Yeah it has asked me that whenever i started executing it!!!!

i2ijeya 2009-12-12 13:12:12

It doesn't work because you are adding the row in the table instead of in the tbody. See the code in my answer.

Guffa 2009-12-12 13:26:59

Yep, +1 for pointing this out in your answer.

Darin Dimitrov 2009-12-12 13:32:36

Thanks Darin,serkan and guffa for your answers and comments. And i am selecting the darin's answer of pointing out the code standards and the encouragement. Thanks..

i2ijeya 2009-12-12 13:50:50

Answer 2

+2 A:

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>

Guffa 2009-12-12 12:35:23

+1 for pointing out `tbody`.

Darin Dimitrov 2009-12-12 13:33:15

Answer 3

+4 A:

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

Serkan Yersen 2009-12-12 13:06:42

Wow, that's exactly what solved the problem. I've run this into Compatibility Mode under IE8 which basically simulates IE7 and it didn't work. If I put a `tbody` with an id and use `document.getElementById('idoftbody').appendChild(newtr)` it worked fine. My god, one more reason to use jQuery. +1, this really is the correct answer.

Darin Dimitrov 2009-12-12 13:16:39

Dom scripting is really messy on IE. If you are going to manipulate dom in real time I suggest you to use Prototype.js, it has a great DOM scripting support.

Serkan Yersen 2009-12-12 13:28:27

ansaurus

tags:

views:

answers:

Runtime creation of tables in Javascript?

related questions