3

I want to highlight the color of only selected row in table. I have make the background colors of all rows alternated using even-odd technique. But now when I click some row, the whole alternated background behavior gets disturbed. Here is the 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) {
                    for (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 I don't click any row

enter image description here

output after click

enter image description here

how can I maintain the alternate row coloring while highlighting the selected row.

2
  • The name attribute is for input fields. Use class
    – mplungjan
    May 31, 2015 at 9:24
  • but here each row will have different id.
    – JPG
    May 31, 2015 at 9:26

2 Answers 2

3

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

8
  • I did this : <style> .selectedRow{ tr:nth-child(odd){ background-color: #ddf7ef;} table tr.selectedRow{background-color: #fff2e1;} } </style> <script>$("table tr").click(function(){ $("table tr").removeClass('selectedRow'); $('this').addClass('selectedRow');</script> <body><tr class="selectedRow" id="<%=al.indexOf(p)%>" style="background: #81DAF5;" onclick="radioselect(this.id);"></body> but no highlight effect
    – JPG
    May 31, 2015 at 9:38
  • @JSK Please update your question instead of pasting code in comments
    – mplungjan
    May 31, 2015 at 9:39
  • above code does't highlights my table row
    – JPG
    May 31, 2015 at 9:44
  • There were typos. I have fixed them, but the code needs a test like this: jsfiddle.net/mplungjan/4kphetqy
    – mplungjan
    May 31, 2015 at 9:49
  • Its not highlighting either on the link you just provided
    – JPG
    May 31, 2015 at 9:53
0

use active

table tr:active {
    background-color: yellow;
}
1
  • And perrhaps post an example of how to set active?
    – mplungjan
    May 31, 2015 at 9:40

Not the answer you're looking for? Browse other questions tagged or ask your own question.