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
output after click
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
Post a Comment