SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2003
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Highlight on clicking

    I have a page where I display three tables with different data nex to each other. However every item in one table can also be found in the other two tables. I want to give the user the possibility to click on an item and have the browser highlight the other two related entries in the other table.

    I am pretty new to javascript, and I don't know where to start looking. Can you give me a few hints on how hard it would be and which functions I should be looking at, or a kind of general idea... anything really

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm. This isn't gonna be super simple, but it can be done. How is the data organized? Like, if they click on row1col1, where is that in the other two? Random, or predictable?

    Basically, I need to know if we need to search for it, or point to it measurably.

    Also, how do you want to do the highlighting? Using a CSS class would be easiest.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Zealot
    Join Date
    Feb 2003
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's quite a few nested tables. However the layout is always fixed, i.e. predictable. I can show you a screenshot, if it helps:

    click here
    On the left two tables it would be ok if it highlighted the hole line (if that is easier, more precise would be fine, too), guess that can be done by changing the <td> class which currently alternates between row2 (light) and row3(dark).

    The page is DB generated, so generating some kind of javascript arrays etc. is fine if that is necessary. Or would I go assigning some kind of ID to the fields?

    Thank you for your help.

  4. #4
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, here's a proof of concept I just knocked together. It would take a bit more work to make complete, though.
    Code:
    <html>
    <head>
    <title>test</title>
    <style type="text/css">
    	table {
    		border-collapse: collapse;
    		margin: 10px;
    		}
    	td {
    		border: 1px solid black;
    		padding: 3px;
    		}
    	.hilite {
    		background-color: #FCC;
    		}
    </style>
    <script type="text/javascript">
    function blah( td )
    {
    	var data = {
    		'HSV' : 'Hamburger SV',
    		'S04' : 'FC Shalke 04'
    		};
    	var value = td.innerHTML.replace( /:.*$/, "" ).replace( /[ ']/g, "" );
    	var tr = document.body.createTextRange();
    	while( tr.findText( data[value] ) )
    	{
    		tr.parentElement().className = 'hilite';
    		td.className = 'hilite';
    		tr.collapse( false );
    	}
    }
    </script>
    </head>
    <body>
    <table>
    	<tr>
    		<td onclick="blah(this)">HSV : FCN</td>
    		<td onclick="blah(this)">S'04 : VfLBo</td>
    	</tr>
    </table>
    <table id="one">
    	<tr>
    		<td>Hamburger SV 2 : 1 1. FC Nurmberf</td>
    		<td>FC Shalke 04 2 : 1 VfL Bochum</td>
    	</tr>
    </table>
    <table id="two">
    	<tr>
    		<td>Hamburger SV</td>
    		<td>FC Shalke 04</td>
    	</tr>
    </table>
    </body>
    </html>
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  5. #5
    SitePoint Zealot
    Join Date
    Feb 2003
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you.

    I just had a quick look, am I right to assume it parses the whole page? Would that slow down the user considerably on older PCs ? (P-100 Mhz etc.) I remember some kind of snow-JS which basically locked the Browser up on older machines.

    If that is the case could it alternativly be done by assigning IDs to alle the tds? I would also have to switch the highliting off, once another box is clicked, which I don't think I can achieve with regular textparsing...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •