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.
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.
Code:
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>
Comment