Jquery 操作table 相关代码

最新推荐文章于 2024-07-14 03:32:51 发布

aj251

最新推荐文章于 2024-07-14 03:32:51 发布

阅读量528

点赞数

分类专栏： web 开发文章标签： js jquery java

本文链接：https://blog.csdn.net/aj251/article/details/39396859

版权

web 开发专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<%@ 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" οnclick="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="添加" οnclick="add1()"/>
          <input type="button" value="删除" οnclick="delete1()"/>
           <input type="button" value="第一行后添加" οnclick="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>

aj251

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery 操作table 相关代码

String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";%>
复制链接

扫一扫

专栏目录