Dynamic element not being formatted by CSS 1

[butinski]

Help!
I have an HTML table that is being updated client-side with .insertrow and .insertcell. My problem is that when the user adds a new field, the new <TD> fields do not get the formatting that I specified in my CSS.

Any suggestions?
-Richard

 

[MikeBronner]

could you include the URL? If the CSS is written correctly, it should work fine. Even dynamic elements are subject to the overlaying CSS rules.

Take Care,
Mike

 

[butinski]

I think I was using a relative path to the CSS file, but I will try the URL instead.

Thanks for your help,
-Richard

 

[MikeBronner]

hehe No, I meant could you post the URL so that I could take a look at the page?

Thanks

Take Care,
Mike

 

[butinski]

Sorry, I misunderstood. The site is not a public internet site, but here's the source. I got it from:

http://javascript.internet.com/forms/sort-data-table.html

*************************************
function sortTable(col, tableToSort)
{
var iCurCell = col + tableToSort.cols;
var totalRows = tableToSort.rows.length;
var bSort = 0;
var colArray = new Array();
var oldIndex = new Array();
var indexArray = new Array();
var bArray = new Array();
var newRow;
var newCell;
var i;
var c;
var j;
// ** POPULATE THE ARRAY colArray WITH CONTENTS OF THE COLUMN SELECTED
for (i=1; i < tableToSort.rows.length; i++)
{
colArray[i - 1] = setDataType(tableToSort.cells(iCurCell).innerText);
iCurCell = iCurCell + tableToSort.cols;
}
// ** COPY ARRAY FOR COMPARISON AFTER SORT
for (i=0; i < colArray.length; i++)
{
bArray = colArray;
}
// ** SORT THE COLUMN ITEMS
//alert ( colArray );
colArray.sort();
//alert ( colArray );
for (i=0; i < colArray.length; i++)
{ // LOOP THROUGH THE NEW SORTED ARRAY
indexArray = (i+1);
for(j=0; j < bArray.length; j++)
{ // LOOP THROUGH THE OLD ARRAY
if (colArray == bArray[j])
{ // WHEN THE ITEM IN THE OLD AND NEW MATCH, PLACE THE
// CURRENT ROW NUMBER IN THE PROPER POSITION IN THE
// NEW ORDER ARRAY SO ROWS CAN BE MOVED ....
// MAKE SURE CURRENT ROW NUMBER IS NOT ALREADY IN THE
// NEW ORDER ARRAY
for (c=0; c<i; c++)
{
if ( oldIndex[c] == (j+1) )
{
bSort = 1;
}
}
if (bSort == 0)
{
oldIndex = (j+1);
}
bSort = 0;
}
}
}
// ** SORTING COMPLETE, ADD NEW ROWS TO BASE OF TABLE ....
for (i=0; i<oldIndex.length; i++)
{
newRow = tableToSort.insertRow();
for (c=0; c<tableToSort.cols; c++)
{
newCell = newRow.insertCell();
newCell.innerHTML = tableToSort.rows(oldIndex).cells(c).innerHTML;
}
}
//MOVE NEW ROWS TO TOP OF TABLE ....
for (i=1; i<totalRows; i++)
{
tableToSort.moveRow((tableToSort.rows.length -1),1);
}
//DELETE THE OLD ROWS FROM THE BOTTOM OF THE TABLE ....
for (i=1; i<totalRows; i++)
{
tableToSort.deleteRow();
}
}
//--END-->

 

[MikeBronner]

Where do you define the CSS? I'm thinking that the problem is somewhere within the CSS.

I am doing the same thing on one of my pages: creating a dynamic table, and I have the CSS defined at the top of the page. However, mine formats fine.

Take Care,
Mike

 

[butinski]

Here are the files needed to re-create the problem:
--thx

****************hitlistdev.css************
BODY
{
BORDER-RIGHT: indigo thin solid;
PADDING-RIGHT: 0px;
BACKGROUND-POSITION: left top;
BORDER-TOP: indigo thin solid;
PADDING-LEFT: 60px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
BORDER-LEFT: indigo thin solid;
SCROLLBAR-SHADOW-COLOR: #d8bfd8;
SCROLLBAR-3DLIGHT-COLOR: #9999cc;
SCROLLBAR-ARROW-COLOR: #4b0082;
PADDING-TOP: 8px;
SCROLLBAR-TRACK-COLOR: #4b0082;
BORDER-BOTTOM: indigo thin solid;
BACKGROUND-REPEAT: no-repeat;
SCROLLBAR-DARKSHADOW-COLOR: #9999cc;
SCROLLBAR-BASE-COLOR: #ccccff;
BACKGROUND-COLOR: lavender;
TEXT-ALIGN: left;
TEXT-DECORATION: none
}
A:hover
{
COLOR: purple;
FONT-FAMILY: Verdana, Tahoma, Arial
}
A
{
FONT-WEIGHT: bold;
FONT-SIZE: x-small;
COLOR: midnightblue;
FONT-FAMILY: Verdana, Tahoma, Arial
}
.pagetitle
{
BORDER-RIGHT: indigo 2px solid;
BORDER-TOP: indigo 2px solid;
FONT: 13pt Verdana, Tahoma, Arial;
BORDER-LEFT: indigo 2px solid;
WIDTH: 600px;
COLOR: #eeeeee;
BORDER-BOTTOM: indigo 2px solid;
LETTER-SPACING: 0.5em;
POSITION: relative;
TOP: 0px;
HEIGHT: 27px;
BACKGROUND-COLOR: #996699;
TEXT-ALIGN: center
}
.celltitle
{
BORDER-RIGHT: #663366 1px solid;
PADDING-RIGHT: 12px;
BORDER-TOP: #663366 1px;
PADDING-LEFT: 12px;
FONT-WEIGHT: bold;
FONT-SIZE: x-small;
PADDING-BOTTOM: 0px;
BORDER-LEFT: #663366 1px;
COLOR: midnightblue;
PADDING-TOP: 0px;
BORDER-BOTTOM: #663366 1px solid;
FONT-FAMILY: Tahoma, Verdana, Arial;
BACKGROUND-COLOR: #ccccff;
TEXT-ALIGN: left
}
.fieldtext
{
BORDER-RIGHT: #ccccff 1px solid;
PADDING-RIGHT: 10px;
BORDER-TOP: blue 1px;
PADDING-LEFT: 5px;
FONT-WEIGHT: normal;
FONT-SIZE: x-small;
PADDING-BOTTOM: 2px;
TEXT-TRANSFORM: uppercase;
BORDER-LEFT: blue 1px;
COLOR: darkblue;
PADDING-TOP: 2px;
BORDER-BOTTOM: #ccccff 1px solid;
FONT-FAMILY: Tahoma, Verdana, Arial;
LETTER-SPACING: 1px;
TEXT-ALIGN: left
}
.maintable
{
BORDER-RIGHT: #663366 1px solid;
PADDING-RIGHT: 0px;
BORDER-TOP: #663366 1px solid;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
BORDER-LEFT: #663366 1px solid;
WIDTH: 600px;
PADDING-TOP: 0px;
BORDER-BOTTOM: #663366 1px solid;
BACKGROUND-COLOR: #f5f5ff;
TEXT-ALIGN: left
}
.tabletitle
{
BORDER-RIGHT: #663366 1px solid;
PADDING-RIGHT: 5px;
BORDER-TOP: #663366 1px solid;
PADDING-LEFT: 5px;
FONT-WEIGHT: bold;
FONT-SIZE: x-small;
BORDER-LEFT: #663366 1px solid;
WIDTH: 50px;
COLOR: midnightblue;
BORDER-BOTTOM: #663366 1px;
FONT-FAMILY: Tahoma, Verdana, Arial;
BACKGROUND-COLOR: #f5f5ff
}
.column1
{
BORDER-RIGHT: #663366 1px solid;
BORDER-BOTTOM: #663366 1px solid;
BACKGROUND-COLOR: #ccccff;
TEXT-ALIGN: center
}
.topfiller
{
BORDER-RIGHT: #663366 1px solid;
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px;
FONT-WEIGHT: bold;
FONT-SIZE: x-small;
PADDING-BOTTOM: 2px;
WIDTH: 35px;
COLOR: darkslateblue;
PADDING-TOP: 2px;
BORDER-BOTTOM: #663366 1px solid;
FONT-FAMILY: Verdana, Tahoma, Arial;
BACKGROUND-COLOR: #ccccff
}
.filler
{
BORDER-RIGHT: #ccccff 1px solid;
BORDER-TOP: #ccccff;
BORDER-LEFT: #ccccff;
BORDER-BOTTOM: #ccccff 1px solid
}
.chkbox
{
BORDER-RIGHT: indigo 1px;
BORDER-TOP: indigo 1px;
FONT-WEIGHT: bold;
BORDER-LEFT: indigo 1px;
BORDER-BOTTOM: indigo 1px
}
.viewimage
{
BORDER-RIGHT: darkslateblue 2px solid;
BORDER-TOP: darkslateblue 2px solid;
FONT-WEIGHT: bold;
FONT-SIZE: x-small;
BORDER-LEFT: darkslateblue 2px solid;
COLOR: ghostwhite;
BORDER-BOTTOM: darkslateblue 2px solid;
FONT-FAMILY: Tahoma, Verdana, Arial;
LETTER-SPACING: 2px;
BACKGROUND-COLOR: #9999cc;
TEXT-ALIGN: center
}
.tablecount
{
BORDER-RIGHT: #663366 2px solid;
PADDING-RIGHT: 5px;
BORDER-TOP: #663366 1px;
PADDING-LEFT: 5px;
FONT-WEIGHT: bold;
FONT-SIZE: x-small;
PADDING-BOTTOM: 2px;
BORDER-LEFT: #663366 1px solid;
WIDTH: 600px;
COLOR: midnightblue;
PADDING-TOP: 2px;
BORDER-BOTTOM: #663366 1px solid;
FONT-FAMILY: Verdana, Tahoma, Arial;
BACKGROUND-COLOR: #ccccff;
TEXT-ALIGN: left
}
.column2
{
BORDER-RIGHT: #ccccff 1px solid;
PADDING-RIGHT: 5px;
BORDER-TOP: #ccccff;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 2px;
BORDER-LEFT: #ccccff;
PADDING-TOP: 2px;
BORDER-BOTTOM: #ccccff 1px solid;
FONT-FAMILY: Tahoma, Verdana, Arial;
TEXT-ALIGN: center
}
.topcolumn2
{
BORDER-RIGHT: #663366 1px solid;
PADDING-RIGHT: 5px;
BORDER-TOP: #663366;
PADDING-LEFT: 12px;
FONT-WEIGHT: bold;
FONT-SIZE: x-small;
PADDING-BOTTOM: 2px;
BORDER-LEFT: #663366;
WIDTH: 70px;
COLOR: midnightblue;
PADDING-TOP: 2px;
BORDER-BOTTOM: #663366 1px solid;
FONT-FAMILY: Verdana, Tahoma, Arial;
BACKGROUND-COLOR: #ccccff;
TEXT-ALIGN: left
}
.cmdbtn
{
BORDER-RIGHT: darkslateblue 2px solid;
BORDER-TOP: darkslateblue 2px solid;
FONT-WEIGHT: bold;
FONT-SIZE: x-small;
BORDER-LEFT: darkslateblue 2px solid;
COLOR: ghostwhite;
BORDER-BOTTOM: darkslateblue 2px solid;
FONT-FAMILY: Tahoma, Verdana, Arial;
LETTER-SPACING: 2px;
HEIGHT: 22px;
BACKGROUND-COLOR: #9999cc;
TEXT-ALIGN: center
}
DIV.boxtopleft
{
CLEAR: right;
BORDER-RIGHT: midnightblue thin solid;
PADDING-RIGHT: 200px;
BORDER-TOP: midnightblue thin solid;
PADDING-LEFT: 10px;
FONT-SIZE: medium;
LEFT: 0px;
FLOAT: left;
PADDING-BOTTOM: 10px;
BORDER-LEFT: midnightblue thin solid;
COLOR: white;
PADDING-TOP: 10px;
BORDER-BOTTOM: midnightblue thin solid;
POSITION: relative;
TOP: 10px;
BACKGROUND-COLOR: #996699
}
.rqst
{
FONT-WEIGHT: bolder;
COLOR: blue;
FONT-STYLE: italic;
FONT-FAMILY: Verdana
}
.announce
{
FONT-WEIGHT: bolder;
FONT-SIZE: 12pt;
COLOR: ghostwhite;
FONT-STYLE: italic;
FONT-FAMILY: Verdana, Arial, 'Times New Roman'
}
***********************************************************
**************hitlistdev.html******************************
<HTML>
<HEAD>
<TITLE>Web Viewer

• </TITLE>
  <LINK REL='stylesheet' TYPE='text/css' HREF='hitlistdev.css'>
  <SCRIPT LANGUAGE=&quot;JavaScript&quot;>
  
  function setDataType(cValue)
  {
  // THIS FUNCTION CONVERTS DATES AND NUMBERS FOR PROPER ARRAY
  // SORTING WHEN IN THE SORT FUNCTION
  var isDate = new Date(cValue);
  if (isDate == &quot;NaN&quot
  {
  if (isNaN(cValue))
  {
  // THE VALUE IS A STRING, MAKE ALL CHARACTERS IN
  // STRING UPPER CASE TO ASSURE PROPER A-Z SORT
  cValue = cValue.toUpperCase();
  return cValue;
  }
  else
  {
  // VALUE IS A NUMBER, TO PREVENT STRING SORTING OF A NUMBER
  // ADD AN ADDITIONAL DIGIT THAT IS THE + TO THE LENGTH OF
  // THE NUMBER WHEN IT IS A STRING
  var myNum;
  myNum = String.fromCharCode(48 + cValue.length) + cValue;
  return myNum;
  }
  }
  else
  {
  // VALUE TO SORT IS A DATE, REMOVE ALL OF THE PUNCTUATION AND
  // AND RETURN THE STRING NUMBER
  //BUG - STRING AND NOT NUMERICAL SORT .....
  // ( 1 - 10 - 11 - 2 - 3 - 4 - 41 - 5 etc.)
  var myDate = new String();
  myDate = isDate.getFullYear() + &quot; &quot; ;
  myDate = myDate + isDate.getMonth() + &quot; &quot;;
  myDate = myDate + isDate.getDate(); + &quot; &quot;;
  myDate = myDate + isDate.getHours(); + &quot; &quot;;
  myDate = myDate + isDate.getMinutes(); + &quot; &quot;;
  myDate = myDate + isDate.getSeconds();
  //myDate = String.fromCharCode(48 + myDate.length) + myDate;
  return myDate ;
  }
  }
  function sorthitlist(col, tableToSort)
  {
  var iCurCell = col + tableToSort.cols;
  var totalRows = tableToSort.rows.length;
  var bSort = 0;
  var colArray = new Array();
  var oldIndex = new Array();
  var indexArray = new Array();
  var bArray = new Array();
  var newRow;
  var newCell;
  var i;
  var c;
  var j;
  // ** POPULATE THE ARRAY colArray WITH CONTENTS OF THE COLUMN SELECTED
  for (i=1; i < tableToSort.rows.length; i++)
  {
  colArray[i - 1] = setDataType(tableToSort.cells(iCurCell).innerText);
  iCurCell = iCurCell + tableToSort.cols;
  }
  // ** COPY ARRAY FOR COMPARISON AFTER SORT
  for (i=0; i < colArray.length; i++)
  {
  bArray = colArray;
  }
  // ** SORT THE COLUMN ITEMS
  //alert ( colArray );
  colArray.sort();
  //alert ( colArray );
  for (i=0; i < colArray.length; i++)
  { // LOOP THROUGH THE NEW SORTED ARRAY
  indexArray = (i+1);
  for(j=0; j < bArray.length; j++)
  { // LOOP THROUGH THE OLD ARRAY
  if (colArray == bArray[j])
  { // WHEN THE ITEM IN THE OLD AND NEW MATCH, PLACE THE
  // CURRENT ROW NUMBER IN THE PROPER POSITION IN THE
  // NEW ORDER ARRAY SO ROWS CAN BE MOVED ....
  // MAKE SURE CURRENT ROW NUMBER IS NOT ALREADY IN THE
  // NEW ORDER ARRAY
  for (c=0; c<i; c++)
  {
  if ( oldIndex[c] == (j+1) )
  {
  bSort = 1;
  }
  }
  if (bSort == 0)
  {
  oldIndex = (j+1);
  }
  bSort = 0;
  }
  }
  }
  // ** SORTING COMPLETE, ADD NEW ROWS TO BASE OF TABLE ....
  for (i=0; i<oldIndex.length; i++)
  {
  newRow = tableToSort.insertRow();
  for (c=0; c<tableToSort.cols; c++)
  {
  newCell = newRow.insertCell();
  newCell.innerHTML = tableToSort.rows(oldIndex).cells(c).innerHTML;
  }
  }
  //MOVE NEW ROWS TO TOP OF TABLE ....
  for (i=1; i<totalRows; i++)
  {
  tableToSort.moveRow((tableToSort.rows.length -1),1);
  }
  //DELETE THE OLD ROWS FROM THE BOTTOM OF THE TABLE ....
  for (i=1; i<totalRows; i++)
  {
  tableToSort.deleteRow();
  }
  }
  // End -->
  </script>
  
  </HEAD>
  <BODY BGCOLOR='#eeeeff'>
  <DIV class='pagetitle'>Web Viewer</DIV>
  
  <FORM NAME='frmHitList' ID='frmHitList' ACTION='someDocument.asp' METHOD='POST' TARGET='_blank'><DIV class=tabletitle>Results:</DIV>
  
  <TABLE CLASS=maintable name=resultstable id=resultstable CELLSPACING=0 CELLPADDING=0 BORDER=0 RULES=all FRAME=void COLS=5>
  <TR>
  <TH CLASS=column1><input type ='checkbox' class=chkbox id='checkall' name='checkall' onclick='toggle()'</TH>
  <TH CLASS=topfiller><Input Type=Submit class=cmdbtn name=submit value='Print' onmouseover=this.style.cursor='hand';this.style.backgroundColor='#CCCCFF' onmouseout=this.style.cursor='auto';this.style.backgroundColor='#9999CC';></TH>
  <TH CLASS=topcolumn2>View</TH>
  <TH CLASS=celltitle><A href='javascript:sorthitlist(3, resultstable);' TITLE='Click to Sort by Date'>Event Date</A></TH>
  <TH CLASS=celltitle><A href='javascript:sorthitlist(4, resultstable);' TITLE='Click to Sort by Type'>Document Type</A></TH>
  </TR>
  <TR>
  <TD class=column1><input type=checkbox class=chkbox id=checkbox1 name=checkbox1 value='image,107608'></td>
  <TD class=filler></TD>
  <TD class=column2><BUTTON CLASS=viewimage TITLE='View Image 107608' TYPE=BUTTON LANGUAGE='JavaScript' ONMOUSEOVER=this.style.cursor='hand';this.style.backgroundColor='#CCCCFF'; ONMOUSEOUT=this.style.cursor='hand';this.style.backgroundColor='#9999CC'; ONCLICK='view()'>View</BUTTON></TD>
  <TD class=fieldtext>02/29/2000</TD>
  <TD class=fieldtext>F Record</TD>
  </TR>
  <TR>
  <TD class=column1><input type=checkbox class=chkbox id=checkbox1 name=checkbox1 value='data,04/03/2002 13:02:59'></TD>
  <TD class=filler></TD>
  <TD class=column2><BUTTON CLASS=viewimage TITLE='Click to View PCR' TYPE=BUTTON LANGUAGE='JavaScript' ONMOUSEOVER=this.style.cursor='hand';this.style.backgroundColor='#CCCCFF'; ONMOUSEOUT=this.style.cursor='hand';this.style.backgroundColor='#9999CC'; ONCLICK='view()'>View</BUTTON></TD>
  <TD class=fieldtext>04/03/2002</TD>
  <TD class=fieldtext>C Record</TD>
  </TR>
  <TR>
  <TD class=column1><input type=checkbox class=chkbox id=checkbox1 name=checkbox1 value='data,05/13/2002 14:16:26'></TD>
  <TD class=filler></TD>
  <TD class=column2><BUTTON CLASS=viewimage TITLE='Click to View PCR' TYPE=BUTTON LANGUAGE='JavaScript' ONMOUSEOVER=this.style.cursor='hand';this.style.backgroundColor='#CCCCFF'; ONMOUSEOUT=this.style.cursor='hand';this.style.backgroundColor='#9999CC'; ONCLICK='view()'>View</BUTTON></TD>
  <TD class=fieldtext>05/13/2002</TD>
  <TD class=fieldtext>E Record</TD>
  </TR>
  <TR>
  <TD class=column1><input type=checkbox class=chkbox id=checkbox1 name=checkbox1 value='image,107627'></td>
  <TD class=filler></TD>
  <TD class=column2><BUTTON CLASS=viewimage TITLE='View Image 107627' TYPE=BUTTON LANGUAGE='JavaScript' ONMOUSEOVER=this.style.cursor='hand';this.style.backgroundColor='#CCCCFF'; ONMOUSEOUT=this.style.cursor='hand';this.style.backgroundColor='#9999CC'; ONCLICK=''>View</BUTTON></TD>
  <TD class=fieldtext>07/22/2003</TD>
  <TD class=fieldtext>F Record</TD>
  </TR>
  <TR>
  <TD class=column1><input type=checkbox class=chkbox id=checkbox1 name=checkbox1 value='image,107626'></td>
  <TD class=filler></TD>
  <TD class=column2><BUTTON CLASS=viewimage TITLE='View Image 107626' TYPE=BUTTON LANGUAGE='JavaScript' ONMOUSEOVER=this.style.cursor='hand';this.style.backgroundColor='#CCCCFF'; ONMOUSEOUT=this.style.cursor='hand';this.style.backgroundColor='#9999CC'; ONCLICK=''>View</BUTTON></TD>
  <TD class=fieldtext>07/28/2003</TD>
  <TD class=fieldtext>B Record</TD>
  </TR>
  <TR>
  <TD class=column1><input type=checkbox class=chkbox id=checkbox1 name=checkbox1 value='image,107625'></td>
  <TD class=filler></TD>
  <TD class=column2><BUTTON CLASS=viewimage TITLE='View Image 107625' TYPE=BUTTON LANGUAGE='JavaScript' ONMOUSEOVER=this.style.cursor='hand';this.style.backgroundColor='#CCCCFF'; ONMOUSEOUT=this.style.cursor='hand';this.style.backgroundColor='#9999CC'; ONCLICK=''>View</BUTTON></TD>
  <TD class=fieldtext>07/28/2003</TD>
  <TD class=fieldtext>B Record</TD>
  </TR>
  </TABLE><DIV CLASS=tablecount>Found 6 records.</DIV></FORM><br><br><br>
  </BODY>
  </HTML>
  *********************************************
  END
  

 

[adam0101]

Found it!

  // ** SORTING COMPLETE, ADD NEW ROWS TO BASE OF TABLE ....
  for (i=0; i<oldIndex.length; i++)
    {
      newRow = tableToSort.insertRow();
      for (c=0; c<tableToSort.cols; c++)
        {
          newCell = newRow.insertCell();

          newCell.className=tableToSort.rows(oldIndex[i]).cells(c).className;

          newCell.innerHTML = tableToSort.rows(oldIndex[i]).cells(c).innerHTML;
        }
      }

Adam

 

[butinski]

Brilliant! I have been pouring over this code for two days, I guess I couldn't see the forest from the trees.

I did put together a workaround...instead of creating new rows from the sorted array, I just created a blank row, and swapped it with the next row from the array, and deleted the blank ones when finished. It's clunky, but it worked. The code is below. ---Thanks guys for all your help!!!

**********************************************
// ** SORTING COMPLETE, ADD NEW ROWS TO BASE OF TABLE...
for (i=0; i<oldIndex.length; i++)
{
var oNewRow = new Array();
oNewRow = tableToSort.insertRow();
swapRow = oNewRow.swapNode(tableToSort.rows(oldIndex));
}
// ** FINISHED, JUST HAVE TO DELETE THE BLANK ROWS THAT WERE CREATED...
for (x=1; x<oNewRow.length+1; x++)
{
delNewRow = tableToSort.deleteRow(1);
}
}
// End -->