A LIST Apart: For People Who Make Websites

No. 175

Discuss: The Table Ruler

Pages

« First  <  8 9 10

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

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

Pages

« First  <  8 9 10

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.

Remember me

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)