Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    highlight row and col of table

    I can highlight row but can't row and col because I can get number of col when mouse over, plz help me. This is my table.

    PHP Code:
    <table border="5" cellpadding="4" cellspacing="2">
    <
    col id="c1" /><col id="c2" /><col id="c3" /><col id="c4" /><col id="c5" /><col id="c6" /><col id="c7" /><col id="c8" />
                   <
    thead>
                    <
    tr>
                        <
    td width="65" bgcolor="#000099">Bu&#7893;i</td>
                        
    <td width="80" bgcolor="#000099">Th&#7901;i gian</td>
                        
    <td width="92" bgcolor="#000099">Th&#7913; 2</td>
                        
    <td width="102" bgcolor="#000099">Th&#7913; 3</td>
                        
    <td width="97" bgcolor="#000099">Th&#7913; 4</td>
                        
    <td width="77" bgcolor="#000099">Th&#7913; 5</td>
                        
    <td width="80" bgcolor="#000099">Th&#7913; 6</td>
                        
    <td width="84" bgcolor="#000099">Th&#7913; 7</td>
                    
    </tr>
                  </
    thead>
                     <
    tbody id="binding">
                    <
    tr  onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
                        <
    td rowspan="8" bgcolor="#000099">Sáng</td>
                        <
    td rowspan="4" bgcolor="#000099">7g-9g15</td>
                        <
    td>&nbsp;</td>
                        <
    td>&nbsp;</td>
                        <
    td>&nbsp;</td>
                        <
    td>&nbsp;</td>
                        <
    td>&nbsp;</td>
                        <
    td>&nbsp;</td>
                      </
    tr>
          <
    tr  onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
          </
    tr>
          <
    tr  onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
          </
    tr>
          <
    tr  onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
          </
    tr>
          <
    tr   onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
            <
    td rowspan="4" bgcolor="#000099">9g15-11g30</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
          </
    tr>
          <
    tr  onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
          </
    tr>
          <
    tr  onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
          </
    tr>
          <
    tr  onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
          </
    tr>
          <
    tr  onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
            <
    td rowspan="8" bgcolor="#000099">Chi&#7873;u</td>
            
    <td rowspan="4" bgcolor="#000099">13g-15g15</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
          </
    tr>
          <
    tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
          </
    tr>
          <
    tr  onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
          </
    tr>
          <
    tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
          </
    tr>
          <
    tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'")>
            <
    td rowspan="4" bgcolor="#000099">15g15-17g30</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
          </
    tr>
          <
    tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
          </
    tr>
          <
    tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
          </
    tr>
          <
    tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
          </
    tr>
          <
    tr  onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
            <
    td rowspan="4" bgcolor="#000099">T&#7889;i</td>
            
    <td rowspan="4" bgcolor="#000099">17g30-20g30</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
          </
    tr>
          <
    tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
          </
    tr>
          <
    tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
          </
    tr>
          <
    tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
          </
    tr>
          </
    tbody>
        </
    table

  • #2
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    Highlight row and column header cell:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Any Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    
    	function init(){
    
    		var nTable = document.getElementsByTagName('table')[0];
    		var nHeader = nTable.getElementsByTagName('th');
    		var nCell = nTable.getElementsByTagName('td');
    		var nRowCell = "";
    		for (i=0; i<nCell.length; i++)
    			{
    			 nCell[i].onmouseover = function()
    				{
    				 nRowCell = this.parentNode.getElementsByTagName('td');
    				 for (n=0; n<nRowCell.length; n++)
    					{
    					 nRowCell[n].style.backgroundColor = "#87ceeb";
    					 if (nRowCell[n] == this)
    						{
    						 nHeader[n].style.backgroundColor = "#ff8c00";
    						}
    					}
    				 this.onmouseout = function()
    					{
    					 for (n=0; n<nRowCell.length; n++)
    						{
    					 	 nRowCell[n].style.backgroundColor = "#ffffe0";
    					 	 if (nRowCell[n] == this)
    							{
    						 	 nHeader[n].style.backgroundColor = "#7fffd4";
    							}
    						}
    					}					
    				}			 
    			} 
    	}
    
    	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    
    	
    </script>
    <style type="text/css">
    
    	 body {background-color: #eae3c6; margin-top: 60px;}
    	
    	 table {width: 400px; margin-left: auto; margin-right: auto; border-collapse: collapse; 
    		border-bottom: 1px solid black; border-right: 1px solid black; font-family: arial; font-size: 12pt;
    		cursor: default;}
    	 table th {background-color: #7fffd4; border-left: 1px solid black; border-top: 1px solid black; padding: 5px;}
    	 table tr td {background-color: #ffffe0; border-top: 1px solid black; border-left: 1px solid black; 
    		      text-align: center; padding: 5px;} 	
    
    
    </style>
    </head>
    	<body>
    		<table>
            		<thead>
                			<tr>
                   				<th width="33%">Column 1</th>
                   				<th width="33%">Column 2</th>
                   				<th width="33%">Column 3</th>
                			</tr>
             		</thead>
             		<tbody>
                			<tr>
                   				<td>One</td>
                  				<td>One</td>
                   				<td>One</td>
               			</tr>
                			<tr>
                   				<td>Two</td>
                   				<td>Two</td>
                   				<td>Two</td>
                			</tr>
                			<tr>
                   				<td>Three</td>
                   				<td>Three</td>
                   				<td>Three</td>
               			</tr>
    				<tr>
                   				<td>Four</td>
                   				<td>Four</td>
                   				<td>Four</td>
               			</tr>
             		</tbody>
          		</table>	
    	</body>
    </html>

  • Users who have thanked Sciliano for this post:

    rukawa1184 (11-12-2010)

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    thanks a lot


  •  

    Posting Permissions

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