I am trying to merge to scripting samples I for on a source code web
site and having limited luck. Then first one is called Zebra Tables
witch colors alternate rows of a table to look beter. The second is a
rule code that highlights the row you are currently moused over. Both
are making use of CSS style sheet to do all of their formating.
My problem is that the rollover is changing the text color but not the
color of the row background as the example does in the original code
which is what I am looking for out of this. Anyone have any ideas???
Link to the Samples are here:
http://www.alistapart.com/articles/zebratables/
http://www.alistapart.com/articles/tableruler/
My Code I have cobbled together
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<style type="text/css">
#mytable {
border: 1px solid #666666;
cellspacing: 0;
}
#mytable thead th,tfoot td{
background-color: #003366;
font-family: "lucida grande", verdana, sans-serif;
font-weight: bold;
color: #ffffff;
font-size: 10pt;
padding: 3px 8px;
}
#mytable tbody tr td {
font-family: "lucida grande", verdana, sans-serif;
font-size: 8pt;
padding: 3px 8px;
border-left: 1px solid #D9D9D9;
}
#mytable tbody tr td.selected {
font-style:italic
font-size: 8pt;
text-decoration:unde rline;
color: #660000;
font-weight: bold;
}
#mytable tbody tr.ruled{
font-size: 11pt;
background:#9cf ;
color: "#ccc";
}
table{
border:1px solid #000;
border-collapse:collap se;
}
</style>
<script type="text/javascript">
<!--
// this function is needed to work around
// a bug in IE related to element attributes
function hasClass(obj) {
var result = false;
if (obj.getAttribu teNode("class") != null) {
result = obj.getAttribut eNode("class"). value;
}
return result;
}
function stripe(id) {
// the flag we'll use to keep track of
// whether the current row is odd or even
var even = false;
// if arguments are provided to specify the colours
// of the even & odd rows, then use the them;
// otherwise use the following defaults:
var evenColor = arguments[1] ? arguments[1] : "#fff";
var oddColor = arguments[2] ? arguments[2] : "#eee";
// obtain a reference to the desired table
// if no such table exists, abort
var table = document.getEle mentById(id);
if (! table) { return; }
// by definition, tables can have more than one tbody
// element, so we'll have to get the list of child
// <tbody> ;s
var tbodies = table.getElemen tsByTagName("tb ody");
// and iterate through them...
for (var h = 0; h < tbodies.length; h++) {
// find all the <tr> elements...
var trs = tbodies[h].getElementsByT agName("tr");
// ... and iterate through them
for (var i = 0; i < trs.length; i++) {
// avoid rows that have a class attribute
// or backgroundColor style
if (! hasClass(trs[i]) &&
! trs[i].style.backgrou ndColor) {
// get all the cells in this row...
var tds = trs[i].getElementsByT agName("td");
// and iterate through them...
for (var j = 0; j < tds.length; j++) {
var mytd = tds[j];
// avoid cells that have a class attribute
// or backgroundColor style
//if (! hasClass(mytd) &&
// ! mytd.style.back groundColor) {
mytd.style.back groundColor =
even ? evenColor : oddColor;
//}
}
}
// flip from odd to even, or vice-versa
even = ! even;
}
}
}
// -->
</script>
<script type="text/javascript">
/*
tableruler()
written by Chris Heilmann for alistapart.
enables a rollover of rows for each table with the classname
"hlrows"
*/
function tableruler()
{
if (document.getEl ementById && document.create TextNode)
{
var tables=document .getElementsByT agName('table') ;
for (var i=0;i<tables.le ngth;i++)
{
if(tables[i].className=='ru ler')
{
var trs=tables[i].getElementsByT agName('tr');
for(var j=0;j<trs.lengt h;j++)
{
if(trs[j].parentNode.nod eName=='TBODY')
{
trs[j].onmouseover=fu nction(){this.c lassName='ruled ';return
false}
trs[j].onmouseout=fun ction(){this.cl assName='';retu rn
false}
}
}
}
}
}
}
</script>
<script type="text/javascript">
window.onload=f unction(){table ruler();}
</script>
<html>
<head>
<meta NAME="GENERATOR " Content="SAPIEN Technologies, Inc. PrimalScript
3.1">
<title>Test Page</title>
</head>
<body onload="stripe( 'mytable', '#fff', '#edf3fe');tabl eruler()"><a
name="top"></a>
<div id="bottle">
<h1>Test CSS and Java</h1>
<table class="ruler" id="mytable" >
<thead>
<tr><th scope="col">tes t1</th><th scope="col">tes t2</th></tr>
</thead>
<TBODY>
<tr><td>A</td><td>A</td></tr>
<tr><td>B</td><td>A</td></tr>
<tr><td>C</td><td>A</td></tr>
<tr><td>Dee</td><td>A</td></tr>
<tr><td>E</td><td>A</td></tr>
<tr><td>F</td><td>A</td></tr>
</TBODY>
<tfoot>
<tr><td colspan="2">Sum mary</td></tr>
</tfoot>
</table>
</div>
</body>
</html>
Comment