Somewhat similar to Jason Karns comments http://www.alistapart.com/discuss/tableruler/8/#c7519 except…
I have a table that uses a rowspan covering two rows per item. Without nesting all the data in a row, how would I be able to accomplish this? So when you roll over either of these rows they both highlight.
I believe a few other people asked about multiple classes before I did. Now you’re complaining about my link when I’m just filling in the blanks that you left out.
The discussion on multiple classes has a lot of other comments between. Here’s a recap:
You said: “I still don’t see the point in several classes, when you can add in ID and a contextual selector?”
My reply:
How about using different class token for alternate rows?
You said:
the multiple class one for example was rather useless
You said:
The script as it is (with some of the aforementioned changes – multiple classes for example) can work with any clean markup, hand coded, from a CMS output or a database call.
Now we get the truth out. That’s why I posted the link, and if you’d read the page more thoroughly before making denigrating statements, you’d see there’s a lot of information that the w3c spec doesn’t include. The page links to the HTML and CSS 2 TRs.
To be honest, your example is not really useful in and of itsself, though it could be useful in an application. However, thin client application developers should be able to do this stuff in his sleep.
I am still a novice at this and a lot of the posts above confused me . However, I wanted to say a massive thanks to Chris, I have just put the ruler on my site and I think its looks great.
Copy & paste the code below to embed this comment.
Toolman
Hey guys;
Great idea here; I have modified the code to stop it clobbering existing classes on the TRs – it still clobbers the onmouseover/out though. Thought someone might like this:
function tableruler()
{
if (document.getElementById && document.createTextNode)
{
var tables=document.getElementsByTagName(‘table’);
for (var i=0;i<tables.length;i++)
{
if(tables.className.indexOf(tableRuleClass) >= 0)
{
var trs=tables.getElementsByTagName(‘tr’);
for(var j=0;j<trs.length;j++)
{
if(trs[j][removed].nodeName==‘TBODY’)
{
trs[j].
{
if (this.className.indexOf(ruledClass) == -1)
{
this.className=this.className + ruledClass;
}
return false;
}
trs[j].
{
if (this.className.indexOf(ruledClass) >= 0)
{
this.className = this.className.substring(0, this.className.length – ruledClass.length);
}
return false;
}
}
}
}
}
}
}
97 Reader Comments
Back to the Articledarkcryst
Causes harm in IE6? Do explain, because I’ve found IE6 quite evil when I leave one out.
Bradley Caddel
Somewhat similar to Jason Karns comments http://www.alistapart.com/discuss/tableruler/8/#c7519 except…
I have a table that uses a rowspan covering two rows per item. Without nesting all the data in a row, how would I be able to accomplish this? So when you roll over either of these rows they both highlight.
——Example——
<tr>
<td rowspan=“2”>Kraftwerk</td>
<td>Die Mensch-Maschine</td>
</tr>
<tr>
<td>Dopplereffekt</td>
</tr>
——/Example——
Am I asking too much?
DHTML Kitchen
Dear Chris,
I believe a few other people asked about multiple classes before I did. Now you’re complaining about my link when I’m just filling in the blanks that you left out.
The discussion on multiple classes has a lot of other comments between. Here’s a recap:
You said: “I still don’t see the point in several classes, when you can add in ID and a contextual selector?”
My reply:
How about using different class token for alternate rows?
You said:
the multiple class one for example was rather useless
You said:
The script as it is (with some of the aforementioned changes – multiple classes for example) can work with any clean markup, hand coded, from a CMS output or a database call.
Now we get the truth out. That’s why I posted the link, and if you’d read the page more thoroughly before making denigrating statements, you’d see there’s a lot of information that the w3c spec doesn’t include. The page links to the HTML and CSS 2 TRs.
To be honest, your example is not really useful in and of itsself, though it could be useful in an application. However, thin client application developers should be able to do this stuff in his sleep.
Ant Molloy
I am still a novice at this and a lot of the posts above confused me . However, I wanted to say a massive thanks to Chris, I have just put the ruler on my site and I think its looks great.
Thanks
Ant
Toolman
Hey guys;
Great idea here; I have modified the code to stop it clobbering existing classes on the TRs – it still clobbers the onmouseover/out though. Thought someone might like this:
function tableruler()
{
if (document.getElementById && document.createTextNode)
{
var tables=document.getElementsByTagName(‘table’);
for (var i=0;i<tables.length;i++)
{
if(tables.className.indexOf(tableRuleClass) >= 0)
{
var trs=tables.getElementsByTagName(‘tr’);
for(var j=0;j<trs.length;j++)
{
if(trs[j][removed].nodeName==‘TBODY’)
{
trs[j].
{
if (this.className.indexOf(ruledClass) == -1)
{
this.className=this.className + ruledClass;
}
return false;
}
trs[j].
{
if (this.className.indexOf(ruledClass) >= 0)
{
this.className = this.className.substring(0, this.className.length – ruledClass.length);
}
return false;
}
}
}
}
}
}
}
Marc Palau
<style>
table.ruler{
border:1px solid black;
width:300px;
font-family:Tahoma,Verdana,Arial,Helvetica;
}
th{
background-color:#F2F2F2;
text-align:left;
padding-left:3px;
}
td{
border-top:1px solid black;
padding-left:5px;
}
tr.trover{
background-color:#CECEDE;
cursor:hand; cursor:pointer;
color:#2E2E3E;
}
tr.down{
background-color:#FFFFAE;
cursor:hand; cursor:pointer;
}
</style>
[removed]
window.onload=function(){
if(document.getElementById&&document;.createTextNode){
var taules=document.getElementsByTagName(“table”);
for(var i=0;i<taules.length;i++){
var e=taules;
if(e.className==“ruler”){
var trs=e.getElementsByTagName(“tr”);
for(var j=0;j<trs.length;j++){
if(trs[j].firstChild.tagName.toLowerCase()!=“th”){
trs[j].clicat=false;
trs[j].
this.className=“trover”;
return false;
}
trs[j].
if(this.clicat==false){
this.className=”“;
return false;
}else{
this.className=“down”;
return false
}
}
trs[j].
this.clicat=!this.clicat;
this.className=“down”;
return false;
}
}
}
}
}
}
}
[removed]
<table cellpadding=“0” cellspacing=“0” class=“ruler”>
<tr><th>NUM</th><th>NOMBRE</th><th>APELLIDO</th></tr>
<tr><td>1.</td><td>Marc</td><td>Palau</td></tr>
<tr><td>2.</td><td>Marc</td><td>Palau</td></tr>
<tr><td>3.</td><td>Marc</td><td>Palau</td></tr>
<tr><td>4.</td><td>Marc</td><td>Palau</td></tr>
</table>
Chris
now, and took in all the questions about multi classes.
http://www.onlinetools.org/tools/domtableenhance.php
is the result, enjoy.
Still no click event, but I really think things that are no links, should not be clickable.