Creating Dynamic Tables with JavaScript

[murderof1]

Hello,

I'm new to Javascript, but I'm trying to create html tables based off a checkbox action. Is it possible to do this on the same page?

I've noticed that document.write() will create the tables in a new request which isn't what I'm looking for. I attempted to do this via DOM but I can't get the tables to show up in the page.

                function checkboxOnDemand(obj, parentId, childId, topHeader)
    {
        var checkbox = eval("document.checkForm." + obj.name);
 
        if(checkbox.checked == true)
        {
            alert("Adding table");
            addParentTable(parentId, childId, topHeader);
        }
        else
        {
            alert("Removing table");
            removeElement(parentId, childId);
        }
    }
    function addParentTable(parentId, childId, topHeader)
    {
        // get parent element (div)
        var element = document.getElementById(parentId);
 
        if(element != null)
        {
            // create parent table 
            var table = document.createElement('table');
            table.setAttribute('name', childId);
 
            // add style to table
            var cssString = 'border:1px solid #000;width:600;left:800';
            //table.style.cssText = cssString;
            table.setAttribute('style',cssString);
 
            // add table to parent
            element.appendChild(table);
 
            // create header row 1
            var tr1 = document.createElement('tr');
            var td1 = document.createElement('td');
 
            table.appendChild(tr1);
            tr1.appendChild(td1);
 
            // add style to table data
            var cssString1 = 'font-weight:bold;height:10';
            //td.style.cssText = cssString1;
            td1.setAttribute('style',cssString1);
 
            //var text1 = document.createTextNode(topHeader);
            //td.appendChild(text1);
 
            for(var y = 1;y <= rowHeader.length;y++) 
            {
                var tr = document.createElement('tr');
                var td = document.createElement('td');
 
                // add table elements
                table.appendChild(tr);
                tr.appendChild(td);
 
                // add style to table data
                var cssString = 'width:300';
                //td.style.cssText = cssString;
                td.setAttribute('style', cssString);
 
                var div = document.createElement('div');
                div.setAttribute('class', 'labelHeader');
 
                var text2 = document.createTextNode(rowHeader[y-1]);
                div.appendChild(text2);
 
                var td2 = document.createElement('td');
                var cssString2 = 'width:300';
                //td2.style.cssText = cssString2;
                td2.setAttribute('style', cssString2);
                tr.appendChild(td2);
 
                var textBox = document.createElement('input');
 
                if(y == 3)
                {
                    textBox.setAttribute('type', 'file');
 
                    // add "add more files" button here
                    var fileButton = document.createElement('input');
                    fileButton.setAttribute('type', 'button');
                    fileButton.setAttribute('href', '#');
                    fileButton.setAttribute('onClick', '\addAdditionalTable();\"');
                }
                else
                {
                    textBox.setAttribute('type', 'text');
                }
 
                textBox.setAttribute('size', 30);
                textBox.setAttribute('name', ('element' + y));
                td2.appendChild(textBox);            
            }
 
            /*var br1 = document.createElement('br');
            var br2 = document.createElement('br');
            element.appendChild(br1);
            element.appendChild(br2);*/
        }
    }
 
<!-- JSP code that creates the checkboxes -->
<table height=100px width=300px>
<tr>
<td style="width:150"> <div class="labelHeader">Field Name:</div>
</td>
<td class="scroll" style="border:1px solid #000;width:200px; height:150px; overflow: auto">
<% 
for(int x=1;x<=headers.length;x++) 
{
out.println("<input type=\"checkbox\" onClick=\"checkboxOnDemand(this, \'tableSpace\', \'" + tables[x-1] 
+ "\', \'" + headers[x-1] + "\');\" name=\"checkBox" + x + "\" />" + headers[x-1] + "<br>");
}%>    
</td>
</tr>
</table>

[vikas251074]

So this is your code
OK

function checkboxOnDemand(obj, parentId, childId, topHeader)
{
var checkbox = eval("document.checkForm." + obj.name);
 
if(checkbox.checked == true)
{
alert("Adding table");
addParentTable(parentId, childId, topHeader);
}
else
{
alert("Removing table");
removeElement(parentId, childId);
}
}
function addParentTable(parentId, childId, topHeader)
{
// get parent element (div)
var element = document.getElementById(parentId);
 
if(element != null)
{
// create parent table 
var table = document.createElement('table');
table.setAttribute('name', childId);
 
// add style to table
var cssString = 'border:1px solid #000;width:600;left:800';
//table.style.cssText = cssString;
table.setAttribute('style',cssString);
 
// add table to parent
element.appendChild(table);
 
// create header row 1
var tr1 = document.createElement('tr');
var td1 = document.createElement('td');
 
table.appendChild(tr1);
tr1.appendChild(td1);
 
// add style to table data
var cssString1 = 'font-weight:bold;height:10';
//td.style.cssText = cssString1;
td1.setAttribute('style',cssString1);
 
//var text1 = document.createTextNode(topHeader);
//td.appendChild(text1);
 
for(var y = 1;y <= rowHeader.length;y++) 
{
var tr = document.createElement('tr');
var td = document.createElement('td');
 
// add table elements
table.appendChild(tr);
tr.appendChild(td);
 
// add style to table data
var cssString = 'width:300';
//td.style.cssText = cssString;
td.setAttribute('style', cssString);
 
var div = document.createElement('div');
div.setAttribute('class', 'labelHeader');
 
var text2 = document.createTextNode(rowHeader[y-1]);
div.appendChild(text2);
 
var td2 = document.createElement('td');
var cssString2 = 'width:300';
//td2.style.cssText = cssString2;
td2.setAttribute('style', cssString2);
tr.appendChild(td2);
 
var textBox = document.createElement('input');
 
if(y == 3)
{
textBox.setAttribute('type', 'file');
 
// add "add more files" button here
var fileButton = document.createElement('input');
fileButton.setAttribute('type', 'button');
fileButton.setAttribute('href', '#');
fileButton.setAttribute('onClick', '\addAdditionalTable();\"');
}
else
{
textBox.setAttribute('type', 'text');
}
 
textBox.setAttribute('size', 30);
textBox.setAttribute('name', ('element' + y));
td2.appendChild(textBox); 
}
 
/*var br1 = document.createElement('br');
var br2 = document.createElement('br');
element.appendChild(br1);
element.appendChild(br2);*/
}
}
 
<!-- JSP code that creates the checkboxes -->
<table height=100px width=300px>
<tr>
<td style="width:150"> <div class="labelHeader">Field Name:</div>
</td>
<td class="scroll" style="border:1px solid #000;width:200px; height:150px; overflow: auto">
<% 
for(int x=1;x<=headers.length;x++) 
{
out.println("<input type=\"checkbox\" onClick=\"checkboxOnDemand(this, \'tableSpace\', \'" + tables[x-1] 
+ "\', \'" + headers[x-1] + "\');\" name=\"checkBox" + x + "\" />" + headers[x-1] + "<br>");
}%> 
</td>
</tr>
</table> 

[acoder]

You need to add it to a tbody in IE (I assume the problem is in IE).

See Browser Quirk: Dynamically appended table does not appear on page.