您的位置：首页 > Web前端 > JQuery

Jquery 操作table 相关代码

2014-09-19 13:28 302 查看

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

   String path = request.getContextPath();

   String basePath = request.getScheme() + "://"

           + request.getServerName() + ":" + request.getServerPort()

           + path + "/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

   <head>

       <base href="<%=basePath%>">

       <title>My JSP 'table.jsp' starting page</title>

       <meta http-equiv="pragma" content="no-cache">

       <meta http-equiv="cache-control" content="no-cache">

       <meta http-equiv="expires" content="0">

       <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

       <meta http-equiv="description" content="This is my page">

       <style>

       .hover {

           background: #bcd4ec;

       }

       </style>

       <script type="text/javascript" src="js/jquery-1.4.2.js"></script>









   </head>

   <body>

       <table class="table1">

       <thead>

          <th class="table1th1">全选<input id="qx" onclick="aa()" type="checkbox"/></th>

          <th>11</th>

          <th>22</th>

          <th>33</th>

          <th>44</th>

          </thead>

       <tbody>

           <tr>

                <td class="table1check"><input name="ck" type="checkbox"/></td>

               <td>

                   aaaaaaa

               </td>

               <td>

                   vvvvvvv

               </td>

               <td>

                   ddddddd

               </td>

               <td>

                   cccccccc

               </td>

           </tr>

           <tr>

               <td class="table1check"><input name="ck" type="checkbox"/></td>

               <td>

                   dddddd

               </td>

               <td>

                   dddddd

               </td>

               <td>

                   ddwweeee

               </td>

               <td>

                   eeeeeee

               </td>

           </tr>

           <tr>

              <td class="table1check"><input name="ck" type="checkbox"/></td>

               <td>

                   eeeeeee

               </td>

               <td>

                   eeeeeee

               </td>

               <td>

                   eeeeeeeww

               </td>

               <td>

                   ggggggggg

               </td>

           </tr>

           </tbody>

       </table>

       <div>

          <input type="button" value="添加" onclick="add1()"/>

          <input type="button" value="删除" onclick="delete1()"/>

           <input type="button" value="第一行后添加" onclick="add2()"/>

       </div>

       <br>

   </body>

</html>

   <script>
           var flag =false;

           //全选

             $("#qx").click(function(){

                      var flag= $("#qx").attr("checked");

                       if(flag){

                           //取消

                           $(".table1 input[type='checkbox']").attr("checked",true);

                       }else{

                           $(".table1 input[type='checkbox']").attr("checked",false);

               }

       });

    //单双行颜色不一样

       $(".table1 tbody tr:odd").css("background-color", "#bbf");
       $(".table1 tbody tr:even").css("background-color", "#ffc");

        //鼠标进入时，样式改变

       $(".table1 tbody tr").hover(function() {

           $(this).children("td").addClass("hover");

       }, function() {

           $(this).children("td").removeClass("hover")

       });
       var sdf=false;

       //1行任意位置点击，选中这行

       $(".table1 tbody tr").click(function(){

           var check=$(this).children().first().children().first();

           if($(this).children().first().children().first().attr("checked")){

              $(this).children().first().children().first().attr("checked", false);

           }else{

           $(this).children().first().children().first().attr("checked", true);

           }

       });

        //由于冲突，添加checkbox的点击事件

       $("input[name='ck']").click(function(){

          var check=$(this).attr("checked");

           $(this).attr("checked",!check);
       })

     //最后添加1行

       function add1(){

       var tr=$(".table1 tr:eq(1)");

       $(".table1 tbody").append(tr.clone());


       }

    //删除制定的行

       function delete1(){

       $(".table1 tr:eq(1)").remove();
       }

//某行添加行

       function add2(){

           var tr=$(".table1 tr:eq(1)");

           $(".table1 tr:eq(2)").after(tr.clone());

       }

       </script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js jquery java

相关文章推荐

新的分享

章节导航