javascript - Hidden checkboxes for each row of a table

Question

In this web application, I fetch the requests from a database and display the data in a table in a jsp page. I would like to add a function which displays a checkbox next to each row such that the checkbox appears only when mouse hovers over that row. Selecting that checkbox would enable me to draw the data from the row so as to insert the new data back into the database. Any help regarding this would be very much appreciated. Thanks. This is my current code.

<table class="actable" >
 <tr>
  <td>RequestID</td>
  <td>Requester</td>
  <td>Approver</td>
  <td>Status</td>
  <td>Product</td>
  <td>Version</td>
  <td>Source</td>
  <td>Destination</td>
 </tr>
 <%
 for(int i=0;i<reqjsp.size();i++) //reqjsp being the ArrayList that I forward to this jsp from my servlet
 {
 %>
 <tr>  
  <td><%= reqjsp.get(i).getRequestid() %></td>               
  <td><%= reqjsp.get(i).getRequestor() %></td>  
  <td><%= reqjsp.get(i).getApprover() %></td>  
  <td><%= reqjsp.get(i).getStatus() %></td>  
  <td><%= reqjsp.get(i).getProduct() %></td>
  <td><%= reqjsp.get(i).getVersion() %></td>
  <td><%= reqjsp.get(i).getSource() %></td>  
  <td><%= reqjsp.get(i).getDestination() %></td>  
 </tr> 
 <%} %>          
  </table> 

Answer 1

You can do this with CSS:

.actable tr input[type=checkbox] {
    display: none;
}

.actable tr:hover input[type=checkbox] {
    display: inline-block;
}

Live Example | Live Source