Discuss: The Table Ruler
by Christian Heilmann
- Editorial Comments
92 What if you are using a rowspan?
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?
posted at 11:06 am on April 12, 2004 by Bradley Caddel
93 Multiple Classes
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.
posted at 09:59 am on April 15, 2004 by DHTML Kitchen
94 Massive Thanks
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
posted at 12:17 am on April 18, 2004 by Ant Molloy
95 Tweaked code for multi-class TR etc;
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[i].className.indexOf(tableRuleClass) >= 0)
{
var trs=tables[i].getElementsByTagName(‘tr’);
for(var j=0;j<trs.length;j++)
{
if(trs[j][removed].nodeName==‘TBODY’)
{
trs[j]>= 0)
{
this.className = this.className.substring(0, this.className.length – ruledClass.length);
}
return false;
}
}
}
}
}
}
}
posted at 07:58 pm on April 20, 2004 by Toolman
96 Yeah, with Click support!
<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[i];
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]<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>
posted at 03:49 pm on May 12, 2004 by Marc Palau
97 I mixed this one with the zebra tables
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.
posted at 11:47 am on June 2, 2004 by Chris
Discussion Closed
New comments are not being accepted, but you are welcome to explore what people said before we closed the door.
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)






91 huh?
Causes harm in IE6? Do explain, because I’ve found IE6 quite evil when I leave one out.
posted at 07:34 pm on April 9, 2004 by darkcryst