Scrollbar not showing up (CSS)

soshah · 04-29-2008

I am new to HTML/JavaScripts.
I want to construct a table dynamically and remove it on click of a button. The table should have scrollbar in it. I am unable to get a scrollbar even after making use of "overflow : auto;". The scrollbar shows up when I click on the show table button for the second time. Please help.
My code is written below :

<HTML>
<HEAD>
<TITLE>Picking Attribute from Inline Table</TITLE>
<SCRIPT>
function drawInlineTable()

{

var body = document.getElementsByTagName("BODY")[0];

var prevcontent = body.innerHTML;

body.innerHTML = prevcontent + '<DIV STYLE="width: 900">'
+'<TABLE cellspacing=0 cellpadding=2 id=tableid0>'
+'<COL WIDTH=200><COL WIDTH=250><COL WIDTH=370><COL WIDTH=20>'
+'<TR>'
+'<TH width=200 bgcolor="lightgrey">Category</TH>'
+'<TH width=250 bgcolor="lightgrey">Name</TH>'
+'<TH width=370 bgcolor="lightgrey">Description</TH>'
+'<TH width=20 bgcolor="lightgrey">Button</TH>'
+'<TH width=60 bgcolor="lightgrey"> </TH>'
+'</TR>'
+'</TABLE>';

var content = body.innerHTML;

body.innerHTML = content + '<DIV STYLE="overflow: auto; width: 900px; height: 50; border-left: 1px gray solid; border-bottom: 1px gray solid; padding:0px; margin: 0px">'
+ '<TABLE cellspacing=0 cellpadding=2 id=tableid1>'
+ '<COL WIDTH=200><COL WIDTH=250><COL WIDTH=370><COL WIDTH=20>'
+ '</TABLE>';

var tblBody = document.getElementsByTagName("TBODY")[1];

for (var j = 0; 1 > j; j++)
{
var row = document.createElement("TR");

for (var i = 0; 3 > i; i++)
{
var cell = document.createElement("TD");
var cellText = document.createTextNode("cell is row "+j+", column "+i);
cell.appendChild(cellText);
row.appendChild(cell);
}

var myButton = document.createElement("TD");
myButton.innerHTML = '<input type="button" value="Attach" onclick="selectANDhide(this.parentNode.parentNode. rowIndex);">';
row.appendChild(myButton);
tblBody.appendChild(row);
}

alert(body.innerHTML);
}

function selectANDhide(x)
{
var tbl = document.getElementById("tableid1");
var resultArray = new Array();

for (j = 0; j < (tbl.rows[x].childNodes.length) - 1; j++)
{
if (tbl.rows[x].childNodes[j].style)
{
resultArray.push(tbl.rows[x].childNodes[j].innerHTML);
}
}

var resultString = "";

for (k = 0; k < resultArray.length; k++)
{
resultString += k + ": " + resultArray[k] + "\n";
}

alert(resultString);

for (var j = 0; 1 > j; j++)
{
document.getElementById("tableid1").deleteRow(0);
}

document.getElementById("tableid0").deleteRow(0);

alert(x);

var body1 = document.getElementsByTagName("BODY")[0];
body1.innerHTML= '<input type="button" value="Pick Attribute" onClick ="drawInlineTable();">'

}
</SCRIPT>
</HEAD>

<BODY>
</BODY>
<INPUT type="button" value="Pick Attribute" onClick ="drawInlineTable();">
</HTML>

Leprakawn · 04-29-2008

By briefly looking at the code, I am going to assume it might be that you do not have a declared DOCTYPE. Try using HTML 4.0 to see if that will work.

HTML DOCTYPE TAG
A List Apart: Articles: Fix Your Site With the Right DOCTYPE!
O'Reilly Network -- DOCTYPE Explained

Leprakawn · 04-29-2008

And the <input> tag should go within the <body> </body> tags like so:

Code:

<BODY>
<INPUT type="button" value="Pick Attribute" onClick ="drawInlineTable();" />
</BODY>