create a nested table with javascript

Question

emilio 10 Junior Poster

15 Years Ago

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 ?

javascript

3 Contributors
8 Replies
2K Views
2 Days Discussion Span
Latest Post 15 Years Ago Latest Post by serkan sendur

All 8 Replies

serkan sendur 821 Postaholic

15 Years Ago

can you please post the entire working html page?

serkan sendur 821 Postaholic

15 Years Ago

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>

Reply to this topic

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.

emilio 10 Junior Poster · Answer 1 · 2009-03-15T11:15:24+00:00

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>

essential 84 Posting Shark Featured Poster · Answer 2 · 2009-03-15T12:32:05+00:00

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>

emilio 10 Junior Poster · Answer 3 · 2009-03-16T01:32:42+00:00

emilio 10 Junior Poster

15 Years Ago

its working great.
thank you very much.

serkan sendur 821 Postaholic Banned · Answer 4 · 2009-03-16T01:35:31+00:00

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.

ALWAYS use protection! You don't want to have babies before you're ready, do you?

emilio 10 Junior Poster · Answer 5 · 2009-03-16T17:30:26+00:00

emilio 10 Junior Poster

15 Years Ago

serkan, i used your code.

serkan sendur 821 Postaholic Banned · Answer 6 · 2009-03-16T18:27:28+00:00

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.

create a nested table with javascript

Recommended Answers Collapse Answers

All 8 Replies

Recommended Answers