Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    22
    Thanks
    3
    Thanked 0 Times in 0 Posts

    To create html row using JavaScript

    Hi,

    I am trying to create rows using for loop. Below is my coding.
    When I try on browser, nothing displayed.
    What is wrong with the code?
    Pls help.

    Code:
    <table border="1">
      <tr>
        <th>Ref.1 No.</th>
    	<th>Track</th>
        <th>Title</th>
      </tr>
      <script language="text/JavaScript"> 
      for (var i=1; i<=10; i++)  
      {
    	document.write('<tr>')
    	document.write('<td>' + (100 + i) + '</td>')
    	document.write('<td> 3 </td>')
    	document.write('<td><a href="3-Management & Marketing\101.pdf" target="_blank">XXXXXXXXXXXX</a></td>')
    	document.write('</tr>')
      }
     </script>
    </table>
    Last edited by azrina; 03-04-2013 at 03:45 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    <script language="text/JavaScript">

    should be

    <script type="text/JavaScript">

    document.write() is regarded as obsolete. Better to use DOM methods to create the table.

    Quizmaster: What car company was originally known as Beyerishe Motoren Werke?
    Contestant: Audi.
    Last edited by Philip M; 03-03-2013 at 03:58 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Jul 2010
    Posts
    22
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I read thru internet if i use document.write, it will erase all the contents in the page after it is loaded. I am not so sure about my understanding about this. And, it is advisable to use innerHTML. I think this is what ur trying to explain.

    My html code.
    Code:
    <table border="1" >
      <tr>
        <th>Ref.1 No.</th>
    	<th>Track</th>
        <th>Title</th>
      </tr>
      <tbody id="CONTENT"><div id="SHOW"></div>
      <script type="text/javascript">
      createRows('SHOW');
    </script>
      </tbody>
    </table>
    My js code.
    Code:
    function createRows()
    {
    	var tbody = document.getElementId("CONTENT"); //tbody = your table body
    	tbody.innerHTML = ""; //empty table body
    	for (i=1; i<=10; i++)  
    	{
    		tr = tbody.insertRow(-1); //append a row in table body
    		td = tr.insertCell(-1); td.innerHTML = (100+i);
    		td = tr.insertCell(-1); td.innerHTML = 3;
    		td= tr.insertCell(-1); td.innerHTML = "Jangan bersedih";
    	}
    }
    But still theres no display.
    Pls help.
    Last edited by azrina; 03-03-2013 at 04:54 PM.

  • #4
    New Coder
    Join Date
    Jul 2010
    Posts
    22
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I wrongly type getElementId. It should be getElementByID.
    Do JavaScript have compiler/debugger? I used to use compiler like Visual C++ that shows the line no of the syntax error. Do JavaScript have something similar like this?

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by azrina View Post
    I wrongly type getElementId. It should be getElementByID.
    Do JavaScript have compiler/debugger? I used to use compiler like Visual C++ that shows the line no of the syntax error. Do JavaScript have something similar like this?
    Yes, IE and Chrome (modern browsers) have an error console. Press F12. The Chrome one is marginally better. In Firefox you can use Firebug.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •