javascript - how to highlight the color of selected table row using the name attribute in jquery -


this question has answer here:

i want highlight color of selected row in table. have make background colors of rows alternated using even-odd technique. when click row, whole alternated background behavior gets disturbed. here code :

<%@ page language="java" contenttype="text/html; charset=iso-8859-1"     pageencoding="iso-8859-1"%> <%@ page import="java.util.*"%> <%@ page import="java.sql.*"%> <%@ page import="jkl.*"%> <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>insert title here</title> <script     src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script>     $(document).ready(function() {         $('tr[name=t1]').each(function(a, b) {             $(b).click(function() {                 $('tr[name=t1]').css('background', '#d8d8d8');                 $(this).css('background', '#f2f5a9');             });         });     }); </script> <script>     function radioselect(id) {         document.getelementbyid("ra" + id).checked = true;     } </script> </head> <body>     <table border="1">         <%             if (session.getattribute("al") != null) {                 arraylist<pojo> al = (arraylist<pojo>) session                         .getattribute("al");                 if (al.size() > 0) {                     (pojo p : al) {                         if (al.indexof(p) % 2 == 0) {         %>         <tr name="t1" id="<%=al.indexof(p)%>" style="background: #81daf5;"             onclick="radioselect(this.id);">             <%                 } else {             %>          <tr name="t1" id="<%=al.indexof(p)%>" style="background: #d8d8d8;"             onclick="radioselect(this.id);">             <%                 }             %>             <td><input type="radio" id="ra<%=al.indexof(p)%>" name="r" /></td>             <td><%=p.getuid()%></td>             <td><%=p.getuname()%></td>             <td><%=p.getupassword()%></td>             <td><%=p.getutype()%></td>         </tr>         <%             }                 }             }         %>     </table> </body> </html> 

output: when don't click row

enter image description here

output after click

enter image description here

how can maintain alternate row coloring while highlighting selected row.

try these:

style

tr:nth-child(odd){ background-color: #ddf7ef;} body table tr.selectedrow{background-color: #fff2e1;} 

scripts

$("table tr").click(function(){     $("table tr").removeclass('selectedrow');     $(this).addclass('selectedrow'); }); 

look this: jsfiddle


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -