Hover and Click

I cannot get the hover to work on the below code. In addition, how do I get the line value when a user double clicks on a line?

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <link rel="stylesheet" type="text/css" href="../CSSTwoColumns.css" media="screen" />
      <title>Scrollable HTML table with CSS Style</title>
      <style type="text/css">
         section {
	         position: relative;
	         border: 1px solid #000;
	         padding-top: 37px;
	         background: #B34C00;
	         width:90%;
         }
         .container {
	         overflow-y: auto;
	         height: 200px;
         }
         table {
	         border-spacing: 0;
	         width:100%;
         }
         td + td {
	         border-left:1px solid #000;
         }
         td, th {
	         border-bottom:1px solid #000;
	         background: #fff;
	         color: #000;
	         padding: 5px 25px;
         }
         th {
	         height: 0;
	         line-height: 0;
	         padding-top: 0;
	         padding-bottom: 0;
	         color: transparent;
	         border: none;
	         white-space: nowrap;
         }
         th div{
	         position: absolute;
	         background: transparent;
	         color: #fff;
	         padding: 4px 25px;
	         top: 0;
	         margin-left: -25px;
	         line-height: normal;
	         border-left: 1px solid #800;
         }
      </style>

	<style style="text/css">
	  	.hoverTable{
			width:100%;
			border-collapse:collapse;
		}
		.hoverTable td{
			padding:7px; border:#4e95f4 1px solid;
		}
		/* Define the default color for all the table rows */
		.hoverTable tr{
			background: #b8d1f3;
		}
		/* Define the hover highlight color for the table row */
	    .hoverTable tr:hover {
	          background-color: #ffff99;
	    }
	</style>
   </head>
   <body>
      <form id="form1">
         <section class="">
            <div class="container">
				<table class="hoverTable">
                  <thead>
                     <tr class="header">
                        <th>
                           User Name
                           <div>User Name</div>
                        </th>
                        <th>
                           Education
                           <div>Education</div>
                        </th>
                        <th>
                           Location
                           <div>Location</div>
                        </th>
                        <th>
                           X1
                           <div>x1</div>
                        </th>
                        <th>
                           Xy
                           <div>xy</div>
                        </th>
                        <th>
                           X1
                           <div>x1</div>
                        </th>
                        <th>
                           Xy
                           <div>xy</div>
                        </th>
                     </tr>
                  </thead>
                  <tbody>
                     <tr>
                        <td>Suresh Dasari</td>
                        <td>B.Tech</td>
                        <td>Chennai</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                     </tr>
                     <tr>
                        <td>Rohini Dasari</td>
                        <td>Msc</td>
                        <td>Chennai</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                     </tr>
                     <tr>
                        <td>Madhav Sai</td>
                        <td>MBA</td>
                        <td>Nagpur</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                     </tr>
                     <tr>
                        <td>Praveen Kumar</td>
                        <td>B.Tech</td>
                        <td>Guntur</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                     </tr>
                     <tr>
                        <td>Mahendra Dasari</td>
                        <td>CA</td>
                        <td>Chennai</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                     </tr>
                     <tr>
                        <td>Nagaraju Dasari</td>
                        <td>MCA</td>
                        <td>USA</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                     </tr>
                     <tr>
                        <td>Sateesh Alavala</td>
                        <td>MD</td>
                        <td>Vizag</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                     </tr>
                     <tr>
                        <td>Sudheer</td>
                        <td>B.Tech</td>
                        <td>Kakinada</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </section>
      </form>
   </body>
</html>

Open in new window

Errol FarroAsked:
Who is Participating?
 
Rainer JeschorCommented:
Hi,
the following works:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <link rel="stylesheet" type="text/css" href="../CSSTwoColumns.css" media="screen" />
      <title>Scrollable HTML table with CSS Style</title>
      <style type="text/css">
         section {
	         position: relative;
	         border: 1px solid #000;
	         padding-top: 37px;
	         background: #B34C00;
	         width:90%;
         }
         .container {
	         overflow-y: auto;
	         height: 200px;
         }
         table {
	         border-spacing: 0;
	         width:100%;
         }
         td + td {
	         border-left:1px solid #000;
         }
         td, th {
	         border-bottom:1px solid #000;
	         background: #fff;
	         color: #000;
	         padding: 5px 25px;
         }
         th {
	         height: 0;
	         line-height: 0;
	         padding-top: 0;
	         padding-bottom: 0;
	         color: transparent;
	         border: none;
	         white-space: nowrap;
         }
         th div{
	         position: absolute;
	         background: transparent;
	         color: #fff;
	         padding: 4px 25px;
	         top: 0;
	         margin-left: -25px;
	         line-height: normal;
	         border-left: 1px solid #800;
         }
      </style>

	<style type="text/css">
	  	.hoverTable{
			width:100%;
			border-collapse:collapse;
		}
		.hoverTable td{
			padding:7px; border:#4e95f4 1px solid;
		}
		/* Define the default color for all the table rows */
		.hoverTable tr td{
			background: #b8d1f3;
		}
		/* Define the hover highlight color for the table row */
	    .hoverTable tr:hover td{
	          background-color: #ffff99;
	    }
	</style>
   </head>
   <body>
      <form id="form1">
	  HelloW
         <section class="">
            <div class="container">
				<table class="hoverTable">
                  <thead>
                     <tr class="header">
                        <th>
                           User Name
                           <div>User Name</div>
                        </th>
                        <th>
                           Education
                           <div>Education</div>
                        </th>
                        <th>
                           Location
                           <div>Location</div>
                        </th>
                        <th>
                           X1
                           <div>x1</div>
                        </th>
                        <th>
                           Xy
                           <div>xy</div>
                        </th>
                        <th>
                           X1
                           <div>x1</div>
                        </th>
                        <th>
                           Xy
                           <div>xy</div>
                        </th>
                     </tr>
                  </thead>
                  <tbody>
                     <tr>
                        <td>Suresh Dasari</td>
                        <td>B.Tech</td>
                        <td>Chennai</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                     </tr>
                     <tr>
                        <td>Rohini Dasari</td>
                        <td>Msc</td>
                        <td>Chennai</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                     </tr>
                     <tr>
                        <td>Madhav Sai</td>
                        <td>MBA</td>
                        <td>Nagpur</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                     </tr>
                     <tr>
                        <td>Praveen Kumar</td>
                        <td>B.Tech</td>
                        <td>Guntur</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                     </tr>
                     <tr>
                        <td>Mahendra Dasari</td>
                        <td>CA</td>
                        <td>Chennai</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                     </tr>
                     <tr>
                        <td>Nagaraju Dasari</td>
                        <td>MCA</td>
                        <td>USA</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                     </tr>
                     <tr>
                        <td>Sateesh Alavala</td>
                        <td>MD</td>
                        <td>Vizag</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                     </tr>
                     <tr>
                        <td>Sudheer</td>
                        <td>B.Tech</td>
                        <td>Kakinada</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                        <td>Aurora</td>
                        <td>Thayisa</td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </section>
      </form>
   </body>
</html>

Open in new window

For your second question - could you please open an additional question here?
Thanks and HTH
Rainer
0
 
Errol FarroAuthor Commented:
Question 2: How do I get the value of the selected row ?
0
 
Michel PlungjanIT ExpertCommented:
Like this:
window.onload=function() {
      var tb = document.querySelector(".hoverTable>tbody");
      tb.ondblclick=function(e) {
         var event = event?event:e;
         var target = event.target || event.srcElement;
         alert(target.parentNode.innerHTML.replace(/<\/td>/g,"").split("<td>"));
      }
   }

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
Thanks but should that not have been split?
0
 
Errol FarroAuthor Commented:
Indeed it should have been a split - can I split the points ?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.