hi

my html form contains a table tag <table id="MainTable">.

i would like to populate this table using a javascript function.
my probllem is that i created a table that contains another table inside on of the <td> tags. i tried to write the most basic code:

var myTable = document.createElement('tbody');
        var row1 = document.createElement('tr');
          var col1 = document.createElement('td');
            var but1 = document.createElement('input');
                but1.setAttribute('type','button');
                but1.setAttribute('value','button1');
                
              col1.appendChild(but1);
            row1.appendChild(col1);
          myTable.appendChild(row1);
          
          var row2 = document.createElement('tr');
            var col2 = document.createElement('td');
              var nestedTbl = document.createElement('tbody');
                var row3 = document.createElement('tr');
                  var col3 = document.createElement('td');     
                    var but2 = document.createElement('input');
                        but2.setAttribute('type','button');
                        but2.setAttribute('value','button2');
                      
                      col3.appendChild(but2);
                    row3.appendChild(col3);
                  nestedTbl.appendChild(row3);
                
                col2.appendChild(nestedTbl);
              row2.appendChild(col2);
             myTable.appendChild(row2);            
      
      MainTable.appendChild(myTable);

when i run the javascript function it creates the table 'MyTable' and shows the first button but ignores completely from the inner table.

is there a way to achieve my goal ?

can you please post the entire working html page?

yes. here is it:

<%@ Page Language="C#" MasterPageFile="~/Masters/MainMaster.Master" AutoEventWireup="true"
    CodeBehind="Login.aspx.cs" Inherits="Site.Login" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<table id="MainTable" width=100% style="height:100%" border=0>

</table>

<script type="text/javascript">

window.onload = Create_Page;

function Create_Page()
{
        var myTable = document.createElement('tbody');
        var row1 = document.createElement('tr');
          var col1 = document.createElement('td');
            var but1 = document.createElement('input');
                but1.setAttribute('type','button');
                but1.setAttribute('value','button1');
                
              col1.appendChild(but1);
            row1.appendChild(col1);
          myTable.appendChild(row1);
          
          var row2 = document.createElement('tr');
            var col2 = document.createElement('td');
              var nestedTbl = document.createElement('tbody');
                var row3 = document.createElement('tr');
                  var col3 = document.createElement('td');     
                    var but2 = document.createElement('input');
                        but2.setAttribute('type','button');
                        but2.setAttribute('value','button2');
                      
                      col3.appendChild(but2);
                    row3.appendChild(col3);
                  nestedTbl.appendChild(row3);
                
                col2.appendChild(nestedTbl);
              row2.appendChild(col2);
             myTable.appendChild(row2);            
      
      MainTable.appendChild(myTable);
}
</script>
</asp:Content>

here is the working version for you, i set the table borders for you to see it clearly.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
  
</head>
<body>

<table id="MainTable" width=100% style="height:100%" border=0>
<tr><td id="MainTD"></td></tr>
</table>

  <script type="text/javascript">
      function deneme() {

          var myTable = document.createElement('table');
          myTable.border = 1;
          var row1 = myTable.insertRow();
          var col1 = row1.insertCell();
          var but1 = document.createElement('input');
          but1.setAttribute('type', 'button');
          but1.setAttribute('value', 'button1');

          col1.appendChild(but1);


          var row2 = myTable.insertRow();
          var col2 = row2.insertCell();
          var nestedTbl = document.createElement('table');
          nestedTbl.border = 1;
          var row3 = nestedTbl.insertRow();
          var col3 = row3.insertCell();
          var but2 = document.createElement('input');
          but2.setAttribute('type', 'button');
          but2.setAttribute('value', 'button2');

          col3.appendChild(but2);
          

          col2.appendChild(nestedTbl);
         

          MainTD.appendChild(myTable);
      }
      deneme();
    </script>
</body>
</html>

You may also try this demo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Nesting Table with JavaScript</title>
<style type="text/css" charset="utf-8">
<!--
table {
   border: 2px solid #800080;
   border-collapse: collapse;
   margin: 0 auto;
   min-height: 2em;
   width: 80% }

input { display: block; vertical-align: middle; margin-left: 2em; }

td { vertical-align: middle; width: 100%; }

table#tbl1, table#tbl2 {
   border: none;
   width: 100%; }

table#tbl1 {
   background-color: #ffaffa;
   color: #ff0386;}

table#tbl2 {
   background-color: #800080;
   color: #aa5aa5; }
-->
</style>
<script type="text/javascript">
<!--

var e = { create : function(element) { try {
return document.createElement( element); } catch(err) { alert('Failed to load the script!') } } };

window.onload = function() {
var body = document.getElementsByTagName('body')[0];
var myTable = e.create('table');
var tr = e.create('tr');
var td = e.create('td');
for ( var x = 1; x <= 2; x++ ) {
var nestedTbl = e.create('table');
   td.appendChild( nestedTbl );
var row = e.create('tr');
var cell = e.create('td')
var input = e.create('input');
   with ( input ) {
   type = 'button';
   value = (( 'button ' ) + x );
       cell.appendChild( input );
}  row.appendChild( cell );
   nestedTbl.id = (( 'tbl' ) + x );
   nestedTbl.appendChild( row ); } tr.appendChild( td );
myTable.appendChild( tr );
body.appendChild(myTable);
}
//-->
</script>
</head>
<body>

</body>
</html>

its working great.
thank you very much.

its working great.
thank you very much.

you are refering to mine? if so , i need reputation, rashakil fool keep deducing my reputation points :) i need some protection.

commented: ALWAYS use protection! You don't want to have babies before you're ready, do you? -2
commented: Take this rubber shield :D +10

serkan, i used your code.

serkan, i used your code.

yeah that is why i said add to my reputation because people keep reducing my reputation because of my non-technical threads like the one i said cheating must be supported, after a while posters would thing that my disreputation comes from the technical knowledge, which is not the case, and wont take my posts seriously.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.