GeeCON Prague 2014*
The moose likes HTML, CSS and JavaScript and the fly likes Creating CSS class at runtime Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Creating CSS class at runtime" Watch "Creating CSS class at runtime" New topic
Author

Creating CSS class at runtime

samir ware
Ranch Hand

Joined: Jul 27, 2005
Posts: 192
Hi Ranchers ,
I want to know weather we can CREATE any CSS class at runtime. Same as that we create in java with the help of reflection API .
Or otherwise can we update any of the CSS property dynamically . I know that we can achive this with javascript. But my requirment is somewhat different. I have a CSS class
left_update {
border-left : 1px solid #ffffff;
position : absolute;
left :10px;
z-index : 1

}

and I am using this class for EACH column in my application as follows

<tr>
<td class='left_update'>1</td>
<td class='left_update'>2</td>
</tr>

however for each column I just want to update the attribute LEFT differently . Like for first td I want to set the LEFT to lets say 50px . For second td I want to keep the LEFT attribute of class to lets say 100 px and so on . That is ,I want to update the left attribute for each TD.
Is there any way to do so . Any white paper ,link will be appriciated
Regards
Samir
Valentin Crettaz
Gold Digger
Sheriff

Joined: Aug 26, 2001
Posts: 7610
There is no "elegant" way to dynamically create new CSS classes, but you may change any properties of any existing CSS class.

You can use the style property in order to update the left property:

var td = ...;
td.style.left = 50 + "px"


SCJP 5, SCJD, SCBCD, SCWCD, SCDJWS, IBM XML
[Blog] [Blogroll] [My Reviews] My Linked In
samir ware
Ranch Hand

Joined: Jul 27, 2005
Posts: 192
thanks Valentin
But this will not work in my situation . In my case I want to use the same CSS class for the different TDs ...adn the value of LEFT is different for each TD . Please look at the example I have given so that you will get a fair idea about what I am saying .
Is there any way I can change the LEFT property for different TDs. That is for first Td LEFT is set to 100px ...for second Td LEFT is set to 200px etc
Dan Drillich
Ranch Hand

Joined: Jul 09, 2001
Posts: 1180
Maybe the CSS counters can help here......


William Butler Yeats: All life is a preparation for something that probably will never happen. Unless you make it happen.
Valentin Crettaz
Gold Digger
Sheriff

Joined: Aug 26, 2001
Posts: 7610
Actually, this should work as the style.left property applied on a given TD element will override the default in the CSS class declaration. Try it.
samir ware
Ranch Hand

Joined: Jul 27, 2005
Posts: 192
Actually this is what my code is....its working fine on IE and Mozilla for FIRST COLUMN FREEZ. When I try to FREEZ THE SECOND COLUMN it works fine with IE but NOT in Mozilla . Can anybody please tell me the solution for the same .


<html>
<head>


<title>Some Title</title>
<STYLE ID="tssxyz" TYPE="text/css">
<!--

table {
border-collapse : collapse;
table-layout : fixed;
width : 400px;
}

td, th {
background-color: #aaaaaa;
border-right : 1px solid #ffffff;
color : #ffffff;
width : 100px;
text-align : center;
}

td.locked_left, th.locked_left {
background-color: #88ff55;
font-weight : bold;
border-left : 1px solid #ffffff;
position : relative;
z-index : 1

}
div#table_container {
width:350px;
overflow: scroll;
position : absolute;
top :200px;
left : 300px

}



-->
</style>


<SCRIPT LANGUAGE="JavaScript1.2"><!--

function getScrollXY() {

var agt=navigator.userAgent.toLowerCase();

var posi = document.getElementById('table_container').scrollLeft;
//alert("posi is " + posi);
var table = document.getElementById('sampleTable');


if ( (parseInt(navigator.appVersion)==4) &&
(agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)
&& (agt.indexOf('compatible') == -1) ) {

document.classes.locked_left.th.left=posi;
document.classes.locked_left.td.left=posi;
}
else if (agt.indexOf('gecko') != -1) {


document.getElementById('tssxyz').sheet.insertRule('th.locked_left { left: ' + posi + ' }', document.getElementById('tssxyz').sheet.cssRules.length );
document.getElementById('tssxyz').sheet.insertRule('td.locked_left { left: ' + posi + ' }', document.getElementById('tssxyz').sheet.cssRules.length );
document.getElementById('tssxyz').sheet.insertRule('td.locked_left { position: absolute }', document.getElementById('tssxyz').sheet.cssRules.length );
document.getElementById('tssxyz').sheet.insertRule('th.locked_left { position: absolute }', document.getElementById('tssxyz').sheet.cssRules.length );
}
else if ( (parseInt(navigator.appVersion)>=4) &&
(agt.indexOf('msie') != -1) ) {

document.styleSheets["tssxyz"].addRule ("th.locked_left", "left:" + posi);
document.styleSheets["tssxyz"].addRule ("td.locked_left", "left:" + posi);
}



}


</SCRIPT>

</head>

<body>
<p>Test it here: <a href="javascript:getScrollXY();">get the scrolling offsets</a>.</p>
<div id='table_container' onScroll = "javascript:getScrollXY();" >

<table id="sampleTable">
<thead>
<tr>
<th class='locked_left'>Number</th>
<th class='locked_left' >English</th>
<th >French </th>
<th >German </th>
</tr>
</thead>

<tbody>
<tr>
<td class='locked_left'>1</td>
<td class='locked_left' >one</td>
<td >un</td>
<td >eins</td>
</tr>
<tr>
<td class='locked_left'>2</td>
<td class='locked_left' >two</td>
<td >deux</td>
<td >zwei</td>
</tr>
<tr>
<td class='locked_left'>3</td>
<td class='locked_left' >three</td>
<td >trois</td>
<td >drei</td>
</tr>
<tr>
<td class='locked_left'>4</td>
<td class='locked_left' >four</td>
<td >quattre</td>
<td >vier</td>
</tr>

</tbody>

</table>

</div>


</body>
</html>
Dan Drillich
Ranch Hand

Joined: Jul 09, 2001
Posts: 1180
Hi Samir,

About freezing the left column(s) - we had a discussion about this subject recently at http://www.coderanch.com/t/120590/HTML-JavaScript/Column-Freez-HTML-table

You obviously know about it, as you started both threads. It's very confusing when one opens different threads with different names about the same subject.

Regards,
Dan
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61309
    
  66

Please read this.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
samir ware
Ranch Hand

Joined: Jul 27, 2005
Posts: 192
Hi Dan ,
I do admit that I opened both the topics . But the way I was trying to achive the desired functionality is different in both the threads. Thats why I open the two separate thread. Anyways ...I will make sure to continue the conversation in the same thread in future. Sorry for inconviniance.
Regards
Samir
samir ware
Ranch Hand

Joined: Jul 27, 2005
Posts: 192
samir ware
Ranch Hand

Joined: Jul 27, 2005
Posts: 192
Above is what the code on which I am trying to achive the desire functionality . I have changed the "onclick" event of the button to "onclicks" as site was not accepting that .
Thanks and regards
Samir
Morris Peters
Greenhorn

Joined: Oct 09, 2007
Posts: 3
This is a hard coded example that freezes the left column, and also the right hand column!

One problem is that in IE there is a bug that changing a CSS rule interrupts the scrollbar dragging. This code has a workaround for that bug - it simulates scrollbar dragging using the mousemove event.

Morris Peters
Greenhorn

Joined: Oct 09, 2007
Posts: 3
Here is another method that has frozen/fixed top & bottom rows, and frozen left and right columns.

Unlike the above solution, it does not dynamically alter the CSS, because I think that technique is likely to be unreliable. It also doesn't need the scrollbar mouseover hack which is a definite improvement.

The new code is fast in IE, and fast enough in Firefox and Safari (tested with 50 rows and 15 columns).

There is no jitter, and like the previous solution it uses NO IE expression: in the CSS (expressions cause serious unobvious lag problems; especially with big dynamically generated pages when you use :hover psuedo-attributes in IE7)

I hope this is useful.

Morris Peters
Greenhorn

Joined: Oct 09, 2007
Posts: 3
Note that for the above, doBottomScroller() and doRightScroller() should be called:
* on page loaded (sets up CSS offsets)
* if table width is changed
* if header or footer row height is changed
* if containing div width/height is changed

The inner scroll bar divs width/height also need to be set up properly - currently they are hardcoded to match the table width/height.

Basically the above example solves all the hard problems, but it needs some love to polish it off.
samir ware
Ranch Hand

Joined: Jul 27, 2005
Posts: 192
The above solution is quite good....Here is one more solution which I could figure out for column freez/lock . It takes the clone of the columns which it wants to lock and then paste that clone over those columns which are to be locked which in turns create the effect that the columns are freezed .I tasted the example with 1000 rows and on IE and Mozilla . It works fine for both the browsers as well as performance is quite good. As far as the API is concern there is only one function called duplicateTable() to which the parameters are table id of the table and the number of columns to be locked and it will do rest of the stuff.
code is as follows


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.BottomScrollbar {
height:18px;
width:350px;
border:0;
margin:0;
overflow-x:scroll;
overflow-y:hidden;
padding:0;
}

.RightScrollbar {
height:400px;
width:18px;
border:0;
margin:0;
overflow-x:hidden;
overflow-y:scroll;
padding:0;
}


.gridouter {
position:relative;
width:350px;
height:400px;
overflow:hidden;
padding: 0 1px 1px 0;
}
.gridinner {
position:relative;
}
.cell {
position: relative;
left: 0px;
top: 0px;
width: 99px;
height: 119px;
overflow: hidden;
border: 1px solid black;
margin: 0 -1px -1px 0;
}

.gridhead .cell,
.gridfoot .cell,
.staticleft,
.staticright {
z-index: 1;
}
.gridhead .staticleft,
.gridhead .staticright,
.gridfoot .staticleft,
.gridfoot .staticright {
z-index: 2;
}
.staticleft,
.staticright {
background-color: #f0f0f0;
}
.gridhead .cell,
.gridfoot .cell {
background-color: #d0d0d0;
}

.gridhead .cell,
.gridfoot .cell {
top: 0px;
}

.gridhead {
position: absolute;
}
.gridheadrow {
position: relative;
z-index: 2;
top: 0px;
}

.gridfoot {
position: absolute;
left: 0px;
z-index: 2;
}
.gridfootrow {
position: relative;
z-index: 2;
top: 0px;
}

.gridbody {
position: absolute;
overflow: hidden;
}

</style>
</head>
<body>


<script>
function setElementLeft(elId, leftpx, rightpx) {

function setCellLeft(cell, isFirst) {
if (cell.tagName != 'TD' && cell.tagName != 'TH') {
if (isFirst) {
cell = cell.nextSibling;
} else {
cell = cell.previousSibling;
}
}
cell = cell.firstChild;
if (cell.tagName != 'DIV') {
cell = cell.nextSibling;
}
if (isFirst) {
cell.style.left = leftpx;
} else {
cell.style.left = rightpx;
}
}

var body = document.getElementById(elId);
for (var i = 0; i < body.childNodes.length; i++) {
var row = body.childNodes[i];
if (row.tagName == 'TR') {
setCellLeft(row.firstChild, true);
setCellLeft(row.lastChild);
}
}
}

function doBottomScroller() {
var left = document.getElementById('bottomscrollbar').scrollLeft;
// Access offsetWidths before anything; if accessed later get horrid scroll jitter in FF
var rightpx = String(left + document.getElementById('gridouterid').offsetWidth - document.getElementById('gridheadid').offsetWidth - 1) + 'px';
var leftpx = String(left) + 'px';
setElementLeft('gridheadid', leftpx, rightpx);
setElementLeft('gridfootid', leftpx, rightpx);
setElementLeft('gridbodyid', leftpx, rightpx);
if (document.all) {
document.getElementById('gridinnerid').style.left = '-' + leftpx;
} else {
document.getElementById('gridheadid').style.left = '-' + leftpx;
document.getElementById('gridfootid').style.left = '-' + leftpx;
document.getElementById('gridbodyid').style.left = '-' + leftpx;
}
}
function doRightScroller() {
var top = document.getElementById('rightscrollbar').scrollTop;
// access offsets before setting anything, otherwise FF display jitters
var headHeight = document.getElementById('gridheadid').offsetHeight;
var footHeight = document.getElementById('gridfootid').offsetHeight;
var outerHeight = document.getElementById('gridouterid').offsetHeight;
var footOffset = outerHeight - footHeight - 1;
if (document.all) {
document.getElementById('gridheadrowid').style.top = String(top + headHeight) + 'px';
document.getElementById('gridfootrowid').style.top = String(top + footOffset) + 'px';
document.getElementById('gridinnerid').style.top = String(-top - footHeight) + 'px';
} else {
document.getElementById('gridfootid').style.top = String(footOffset) + 'px';
var gridBody = document.getElementById('gridbodyid');
gridBody.style.top = String(footHeight) + 'px';
gridBody.style.height = String(outerHeight - footHeight - headHeight) + 'px';
gridBody.scrollTop = top;
}
}
</script>

<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td>



<div class="gridouter" id="gridouterid">
<div class="gridinner" id="gridinnerid">

<!-- the footer is a tbody and at the top to prevent flicker and other problems -->
<table class="grid" cellpadding=0 cellspacing=0 border=0>


<thead class="gridhead" id="gridheadid">
<tr class="gridheadrow" id="gridheadrowid">
<th>
<div class="cell staticleft">
head head head head head head head
<input value="hello hello hello">
</div>
</th>
<th>
<div class="cell">
div 2 div 2 div 2 div 2 div 2 div 2 div 2
<input value="hello hello hello">
</div>
</th>
<th>
<div class="cell">
div 3 div 3 div 3 div 3 div 3 div 3 div 3
<input value="hello hello hello">
</div>
</th>
<th>
<div class="cell">
div 4 div 4 div 4 div 4 div 4 div 4 div 4
<input value="hello hello hello">
</div>
</th>
<th>
<div class="cell staticright">
div 5 div 5 div 5 div 5 div 5 div 5 div 5
<input value="hello hello hello">
</div>
</th>
</tr>
</thead>


<tbody class="gridfoot" id="gridfootid">
<tr class="gridfootrow" id="gridfootrowid">
<th>
<div class="cell staticleft">
foot foot foot foot foot foot foot
<input value="hello hello hello">
</div>
</th>
<th>
<div class="cell">
div 2 div 2 div 2 div 2 div 2 div 2 div 2
<input value="hello hello hello">
</div>
</th>
<th>
<div class="cell">
div 3 div 3 div 3 div 3 div 3 div 3 div 3
<input value="hello hello hello">
</div>
</th>
<th>
<div class="cell">
div 4 div 4 div 4 div 4 div 4 div 4 div 4
<input value="hello hello hello">
</div>
</th>
<th>
<div class="cell staticright">
div 5 div 5 div 5 div 5 div 5 div 5 div 5
<input value="hello hello hello">
</div>
</th>
</tr>
</tbody>


<tbody class="gridbody" id="gridbodyid">
<tr>
<td>
<div class="cell staticleft">
row 1 row 1 row 1 row 1 row 1 row 1 row 1
<input value="hello hello hello">
</div>
</td>
<td>
<div class="cell">
div 2 div 2 div 2 div 2 div 2 div 2 div 2
<input value="hello hello hello">
</div>
</td>
<td>
<div class="cell">
div 3 div 3 div 3 div 3 div 3 div 3 div 3
<input value="hello hello hello">
</div>
</td>
<td>
<div class="cell">
div 4 div 4 div 4 div 4 div 4 div 4 div 4
<input value="hello hello hello">
</div>
</td>
<td>
<div class="cell staticright">
div 5 div 5 div 5 div 5 div 5 div 5 div 5
<input value="hello hello hello">
</div>
</td>
</tr>

<tr>
<td>
<div class="cell staticleft">
row 2 row 2 row 2 row 2 row 2 row 2 row 2
<input value="hello hello hello">
</div>
</td>
<td>
<div class="cell">
div 2 div 2 div 2 div 2 div 2 div 2 div 2
<input value="hello hello hello">
</div>
</td>
<td>
<div class="cell">
div 3 div 3 div 3 div 3 div 3 div 3 div 3
<input value="hello hello hello">
</div>
</td>
<td>
<div class="cell">
div 4 div 4 div 4 div 4 div 4 div 4 div 4
<input value="hello hello hello">
</div>
</td>
<td>
<div class="cell staticright">
div 5 div 5 div 5 div 5 div 5 div 5 div 5
<input value="hello hello hello">
</div>
</td>
</tr>

<tr>
<td>
<div class="cell staticleft">
row 3 row 3 row 3 row 3 row 3 row 3 row 3
<input value="hello hello hello">
</div>
</td>
<td>
<div class="cell">
div 2 div 2 div 2 div 2 div 2 div 2 div 2
<input value="hello hello hello">
</div>
</td>
<td>
<div class="cell">
div 3 div 3 div 3 div 3 div 3 div 3 div 3
<input value="hello hello hello">
</div>
</td>
<td>
<div class="cell">
div 4 div 4 div 4 div 4 div 4 div 4 div 4
<input value="hello hello hello">
</div>
</td>
<td>
<div class="cell staticright">
div 5 div 5 div 5 div 5 div 5 div 5 div 5
<input value="hello hello hello">
</div>
</td>
</tr>
</tbody>

</table>
</div>
</div>


</td>
<td>
<div id="rightscrollbar" class="RightScrollbar" onscroll="doRightScroller()" >
<div style="height: 600px;">
</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="width:350px; height:18px;">
<div id="bottomscrollbar" class="BottomScrollbar" onscroll="doBottomScroller()" >
<div style="width: 500px;">
</div>
</div>

</td>
<td>
</td>
</tr>

</body>
</html>
samir ware
Ranch Hand

Joined: Jul 27, 2005
Posts: 192
I am sooo sorry ...By mistake I posted the same code as above... here is the code about which I was talking about


<!-- this comment puts all versions of Internet Explorer into "reliable mode." -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Lock Columns, Column Locking, Freeze Columns in HTML Tables</title>
<link rel="stylesheet" href="locked-column.css" type="text/css">

<meta name="keywords" content="freeze HTML table columns; lock columns; freeze columns; CSS column locking; prevent column scroll; fixed column; fixed table header; lock header; freeze header; CSS tips; freezing column;">

<script type="text/javascript">

var table;
var div;
var dupTable;
var dupDiv;
var width;
var isIE = navigator.userAgent.indexOf ("MSIE") > -1;
var noOfColumns2Lock = 3;
function duplicateTable(tblID, columns) {
table = document.getElementById(tblID);
div = table.parentNode;
dupDiv = table.parentNode.cloneNode(false); // Clone only the DIV. Not its chlilds.

dupDiv.id="dupDiv";
table.parentNode.onscroll=doScroll; // Match the scrolling of the 2 tables.
dupTable = table.cloneNode(true); // Clone the table along with its child nodes

dupTable.id="dupTable";
// Add table as a child to the parent of the origincal table
var theadRow = dupTable.getElementsByTagName("THEAD")[0].getElementsByTagName("tr")[0]; // Get referance to the header row.
removeChildren(theadRow,"th",noOfColumns2Lock); // Clip the umnwanted part from the header row.
// Get the width of the freezed colmns.
width = getWidth(table.getElementsByTagName("THEAD")[0].getElementsByTagName("tr")[0],"th",noOfColumns2Lock);
var tBodyRows = dupTable.getElementsByTagName("TBODY")[0].getElementsByTagName("tr"); // Get the rows of the duplicate tabel(colned one)
var tBodySourceRows = table.getElementsByTagName("TBODY")[0].getElementsByTagName("tr"); // Get the rows of original tabel
for(var i =0; i < tBodyRows.length; i++)
{
removeChildren(tBodyRows[i],"td",noOfColumns2Lock); // Clip the unwanted columns from the clone tabel
tBodyRows[i].style.height = tBodySourceRows[i].offsetHeight+'px';
}
if(isIE){
dupDiv.style.overflow='hidden';
}
else
{
dupDiv.style.overflow='-moz-scrollbars-none';
}
dupDiv.style.width=width+'px';
dupDiv.style.height=table.parentNode.offsetHeight-18+'px';
dupDiv.style.zIndex=20;
dupDiv.style.position='absolute';
dupDiv.style.backgroundColor='red';
//table.parentNode.appendChild(dupTable);
dupDiv.appendChild(dupTable);
table.parentNode.parentNode.appendChild(dupDiv);
// dupDiv.style.left = 300;//table.scrollLeft;//table.offsetLeft;
// dupDiv.style.top = 300;//table.scrollTop;//table.offsetTop;
dupDiv.style.left = div.offsetLeft+'px';
dupDiv.style.top = div.offsetTop+'px';



}

function removeChildren(node,tag,index)
{
var children = node.getElementsByTagName(tag);
var childrenToBeRemoved = new Array(children.length - index);

for(var i=index; i < children.length; i++)
{
childrenToBeRemoved[i-index] = children[i];

}
for(i=0; i < childrenToBeRemoved.length; i++)
{
node.removeChild(childrenToBeRemoved[i]); // Remove child is javascript function which will remove the child from the node

}

}

function getWidth(node,tag,index)
{
var children = node.getElementsByTagName(tag);
var width = 0;
for(i=0; i < index; i++)
{
width = width + children[i].offsetWidth;

}

return width;

}


var CounterForScroll = 10;
function doScroll()
{

{
CounterForScroll = CounterForScroll+10;

dupDiv.scrollTop=div.scrollTop;
dupDiv.scrollLeft=div.scrollLeft;

}
return true;
}

function reset()
{
CounterForScroll = 0;
}


</script>

</head>
<body onloads="duplicateTable('tbl')">

<h2 style="color:navy">Lock or Freeze Table Columns plus Non-Scroll Headers <br><span style="font-size:75%;">(Internet Explorer CSS solution)</span></h2>





<div id="tbl-container">

<table id="tbl">
<thead>
<tr>
<th>Name</th>
<th>Major</th>
<th>Sex</th>
<th>English</th>
<th>Japanese</th>
<th>Calculus</th>
<th>Geometry</th>
</tr>
</thead>

<tbody>

<tr>
<td>Student01</td>
<td>Languages</td>
<td>male<br>1</td>
<td>80</td>
<td>70</td>
<td>75</td>
<td>80</td>

</tr>
<tr>
<td>Student02</td>
<td>Mathematics</td>
<td>male</td>
<td>90</td>
<td>88</td>
<td>100</td>
<td>90</td>

</tr>
<tr>
<td>Student03</td>
<td>Languages</td>
<td>female</td>
<td>85</td>
<td>95</td>
<td>80</td>
<td>85</td>

</tr>
<tr>
<td>Student04</td>
<td>Languages</td>
<td>male<br>1</td>
<td>60</td>
<td>55</td>
<td>100</td>
<td>100</td>

</tr>
<tr>
<td>Student05</td>
<td>Languages</td>
<td>female</td>
<td>68</td>
<td>80</td>
<td>95</td>
<td>80</td>

</tr>
<tr>
<td>Student06</td>
<td>Mathematics</td>
<td>male</td>
<td>100</td>
<td>99</td>
<td>100</td>
<td>90</td>

</tr>
<tr>
<td>Student07</td>
<td>Mathematics</td>
<td>male</td>
<td>85</td>
<td>68</td>
<td>90</td>
<td>90</td>

</tr>
<tr>
<td>Student08</td>
<td>Languages</td>
<td>male</td>
<td>100</td>
<td>90</td>
<td>90</td>
<td>85</td>

</tr>
<tr>
<td>Student09</td>
<td>Mathematics</td>
<td>male</td>
<td>80</td>
<td>50</td>
<td>65</td>
<td>75</td>

</tr>
<tr>
<td>Student10</td>
<td>Languages</td>
<td>male</td>
<td>85</td>
<td>100</td>
<td>100</td>
<td>90</td>

</tr>
<tr>
<td>Student11</td>
<td>Languages</td>
<td>male<br>1</td>
<td>86</td>
<td>85</td>
<td>100</td>
<td>100</td>

</tr>
<tr>
<td>Student12</td>
<td>Mathematics</td>
<td>female</td>
<td>100</td>
<td>75</td>
<td>70</td>
<td>85</td>

</tr>
<tr>
<td>Student13</td>
<td>Languages</td>
<td>female</td>
<td>100</td>
<td>80</td>
<td>100</td>
<td>90</td>

</tr>
<tr>
<td>Student14</td>
<td>Languages</td>
<td>female</td>
<td>50</td>
<td>45</td>
<td>55</td>
<td>90</td>

</tr>
<tr>
<td>Student15</td>
<td>Languages</td>
<td>male</td>
<td>95</td>
<td>35</td>
<td>100</td>
<td>90</td>

</tr>
<tr>
<td>Student16</td>
<td>Languages</td>
<td>female</td>
<td>100</td>
<td>50</td>
<td>30</td>
<td>70</td>

</tr>
<tr>
<td>Student17</td>
<td>Languages</td>
<td>female<br>1</td>
<td>80</td>
<td>100</td>
<td>55</td>
<td>65</td>

</tr>
<tr>
<td>Student18</td>
<td>Mathematics</td>
<td>male</td>
<td>30</td>
<td>49</td>
<td>55</td>
<td>75</td>

</tr>
<tr>
<td>Student19</td>
<td>Languages</td>
<td>male</td>
<td>68</td>
<td>90</td>
<td>88</td>
<td>70</td>

</tr>
<tr>
<td>Student20</td>
<td>Mathematics</td>
<td>male</td>
<td>40</td>
<td>45</td>
<td>40</td>
<td>80</td>

</tr>
<tr>
<td>Student21</td>
<td>Languages</td>
<td>male</td>
<td>50</td>
<td>45</td>
<td>100</td>
<td>100</td>

</tr>
<tr>
<td>Student22</td>
<td>Mathematics</td>
<td>male</td>
<td>100</td>
<td>99</td>
<td>100</td>
<td>90</td>

</tr>
<tr>
<td>Student23</td>
<td>Languages</td>
<td>female</td>
<td>85</td>
<td>80</td>
<td>80</td>
<td>80</td>

</tr>

<!-- Copy -->
<tr>
<td>Student01</td>
<td>Languages</td>
<td>male</td>
<td>80</td>
<td>70</td>
<td>75</td>
<td>80</td>

</tr>
<tr>
<td>Student02</td>
<td>Mathematics</td>
<td>male</td>
<td>90</td>
<td>88</td>
<td>100</td>
<td>90</td>

</tr>
<tr>
<td>Student03</td>
<td>Languages</td>
<td>female</td>
<td>85</td>
<td>95</td>
<td>80</td>
<td>85</td>

</tr>
<tr>
<td>Student04</td>
<td>Languages</td>
<td>male</td>
<td>60</td>
<td>55</td>
<td>100</td>
<td>100</td>

</tr>
<tr>
<td>Student05</td>
<td>Languages</td>
<td>female</td>
<td>68</td>
<td>80</td>
<td>95</td>
<td>80</td>

</tr>
<tr>
<td>Student06</td>
<td>Mathematics</td>
<td>male</td>
<td>100</td>
<td>99</td>
<td>100</td>
<td>90</td>

</tr>
<tr>
<td>Student07</td>
<td>Mathematics</td>
<td>male</td>
<td>85</td>
<td>68</td>
<td>90</td>
<td>90</td>

</tr>
<!-- Copy End -->
</tbody>
</table>


</div> <!-- end tbl-container -->




</body>
</html>
samir ware
Ranch Hand

Joined: Jul 27, 2005
Posts: 192
Please note that in the above code change the onloads to onload . As this site was not accepting it I have changed the name of the event ..
 
GeeCON Prague 2014
 
subject: Creating CSS class at runtime