javascript - 如何使用 jquery 中的 name 属性突出显示所选表格行的颜色-6ren

javascript - 如何使用 jquery 中的 name 属性突出显示所选表格行的颜色

转载作者：可可西里更新时间：2023-11-01 13:30:44

26

4

<分区>

我只想突出显示表格中选定行的颜色。我已经使用奇偶技术使所有行的背景颜色交替。但是现在当我点击某行时，整个交替的背景行为都会受到干扰。这是代码:

<%@ 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>