CSS Codes
CSS Layouts
Results 1 to 3 of 3

Thread: Highlight Table Columns

  1. 07-24-2006, 04:11 AM #1
    mburt's Avatar
    mburt
    mburt is offline Elite Coders
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default Highlight Table Columns

    Ok. So I have a table, with four headings, and than another row.
    <table width="400" border="0">
    <caption>
    <b>Users</b>
    </caption>
    <tr>
    <td id="points" class="head">Player</td>
    <td id="status" class="head">Status</td>
    <td id="points" class="head">Points</td>
    <td id="coordd" class="head">Coord</td>
    </tr>
    <tr>
    <td>Straos</td>
    <td>Scout</td>
    <td>0</td>
    <td>2:117:5</td>
    </tr>
    </table>

    I want to be able to onmouseOver the headings, and for the column to light up. Any help appreciated.
    - Mike
    Reply With Quote Reply With Quote
  2. 07-24-2006, 05:38 AM #2
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Try this demo out, it may not be exactly what you are looking for but, it probably could be adapted to suit:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Table Column Highlighting - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#theT {
width:80%;
border-top:3px groove silver;
border-right:3px groove silver;
}
#theT td {
border-left:3px groove silver;
border-bottom:3px groove silver;
}
</style>
<script type="text/javascript">
/* Highlight Table Columns © John Davenport Scheuer
 * As first seen in http://www.dynamicdrive.com/forums/
 * This notice must remain for legal use */
function hCol(n){
var tTab=document.getElementById('theT')
for (var i_tem = 0; i_tem < tTab.rows.length; i_tem++)
for (var j_tem = 0; j_tem < tTab.rows[i_tem].cells.length; j_tem++)
if(j_tem==n)
tTab.rows[i_tem].cells[j_tem].style.backgroundColor='yellow'
}
function lCol(n){
var tTab=document.getElementById('theT')
for (var i_tem = 0; i_tem < tTab.rows.length; i_tem++)
for (var j_tem = 0; j_tem < tTab.rows[i_tem].cells.length; j_tem++)
if(j_tem==n)
tTab.rows[i_tem].cells[j_tem].style.backgroundColor=''
}
function eCol(){
var tTab=document.getElementById('theT')
for (var i_tem = 0; i_tem < tTab.rows.length; i_tem++)
for (var j_tem = 0; j_tem < tTab.rows[i_tem].cells.length; j_tem++){
tTab.rows[i_tem].cells[j_tem].onmouseover=new Function("hCol("+j_tem+");");
tTab.rows[i_tem].cells[j_tem].onmouseout=new Function("lCol("+j_tem+");");
}
}
onload=eCol;
</script>
</head>
<body>
<table id="theT" border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
    </tr>
    <tr>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
    </tr>
    <tr>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
    </tr>
    <tr>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
    </tr>
    <tr>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
    </tr>
    <tr>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
    </tr>
    <tr>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
    </tr>
    <tr>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
    </tr>
  </tbody>
</table>
<br>
</body>
</html>
    Last edited by jscheuer1; 07-24-2006 at 08:35 AM. Reason: correct typo
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
  3. 07-24-2006, 02:37 PM #3
    mburt's Avatar
    mburt
    mburt is offline Elite Coders
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Thanks, It worked out great.
    - Mike
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

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
  •  

Forum Rules