zoukankan      html  css  js  c++  java
  • 实现 鼠标移动到表格的某行 该行换背景 ---myEclipse编写

    //jQuary代码部分

    <script>
       $(function(){
          $("tr:odd").css("background","#98FB98");
          $("tr:even").css("background","#7FFFD4");
          var trColor;
          $("tr").click(function(){
          /*  :even 选择器 匹配所有索引值为偶数的元素,从 0 开始计数 */
          /*  :odd  选择器 匹配所有索引值为奇数的元素,从 0 开始计数 */
               $("tr:odd").css("background","#98FB98");
               $("tr:even").css("background","#7FFFD4");
               $("tr[check='1']").removeAttr("check");
               $(this).css("background","#FF69B4");
               $(this).attr("check","1");
          });
          $("tr").mouseover(function(){
          if($(this).attr("check")=="1"){
               return
          }
               trColor=$(this).css("background");
               $(this).css({"background":"FFFF00"});
          }).mouseout(function(){
                   if($(this).attr("check")=="1"){
                   return
            }
               $(this).css("background",trColor);
          });
          
         });
        </script>

    //小脚本,定义了一些变量,以及初始化

    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    List<Student> list = new ArrayList<Student>();
          StudentService service = new StudentService();
          list = service.selectAll();
    String className;
    %>

    //设置的样式

    <body>
        <table id="table" border="1" >
        <tr id="tr">
        <td>序号</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>地址</td>
        <td>联系电话</td>
        </tr>
       <%for(int i=0;i<list.size();i++){
             Student stu=list.get(i);%>
             <tr>
             <td><%=i%></td>
             <td><%=stu.getName() %></td>
             <td><%=stu.getAge() %></td>
             <td><%=stu.getSexID() %></td>
             <td><%=stu.getAddress() %></td>
             <td><%=stu.getPhone() %></td>
             </tr>
             
      <%}%>
    </table>

    </body>

    StudentService 类:

    Student实体类:

  • 相关阅读:
    IDEA中用好Lombok,撸码效率至少提升5倍
    在 IDEA 中使用 Debug,真是太厉害了!
    彻底理解cookie,session,token
    优秀的程序员一定要多写博客!
    IntelliJ IDEA 从入门到上瘾教程,2019图文版!
    注解配置
    过滤器(登录认证)
    过滤器
    Session监听器
    request监听器
  • 原文地址:https://www.cnblogs.com/Dionexin/p/5966263.html
Copyright © 2011-2022 走看看