一个简单的jQuery例子，动态添加表格和删除

最新推荐文章于 2022-05-06 20:04:31 发布

starjuly

最新推荐文章于 2022-05-06 20:04:31 发布

阅读量8k

点赞数

分类专栏： JavaWeb 文章标签： jQuery JavaScript

本文链接：https://blog.csdn.net/starjuly/article/details/52489856

版权

JavaWeb 专栏收录该内容

83 篇文章 0 订阅

订阅专栏

效果如图：

详细代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>title</title>
   
          <meta http-equiv="pragma" content="no-cache">
          <meta http-equiv="cache-control" content="no-cache">
  <script type="text/javascript" src="jquery-1.11.1.js"></script>
  <script type="text/javascript">
          $(document).ready( function(){
          
                   $("#addBtn").click(function(){
                                      
                             //获取表单内容
                             var id =($(":text[name=id]").val());
                             var username =($(":text[name=userName]").val());
                             var age =($(":text[name=age]").val());
                             var address =($(":text[name=c]").val());
                             var password =($(":password").val());
                             
                             //在id：delAllID之后追加内容
                             //外部插入
                             //$("#add").after("<tr ><td><input type='checkbox'/></td><td><span>'+id+'</span></td><td><span>'+uername+'</span></td><td><span>'+password+'</span></td><td><span>'+age+'</span></td><td><span>'+address+'</span></td><td ><a href=’javascript:void(0)‘ id=’delete‘>删除</a></td></tr>");
                             var h1="<tr id='";
                             var hi ="' class='afterAdd'><td><input id='check' type='checkbox' name='ck'/></td><td><span>"; //id
                             var h2="</span></td><td><span>";  //username
                             var h3="</span></td><td><span>"; //password
                             var h4="</span></td><td><span>";  //age
                             var h5="</span></td><td><span>";  //address
                             var h6="</span></td><td ><a href=";
                             var h8="javascript:void(0)";
                             var h9=" οnclick='del(this)'>删除</a></td></tr>";
                             
                             
                             //在<tr id="add"/>标签之后，即外部插入以下内容
                             $("#add").after(h1+id+hi+id+h2+username+h3+password+h4+age+h5+address+h6+h8+h9);
                   });
                   
                   
                   $(":checkbox[name=allCheck]").click(function(){
                                      //方式一
                                      //获取当前标签是否选中的boolean值
                             /*       var status = this.checked;
                                      //获取其他新增的复选框
                                      var checks = $(":checkbox[name=ck]");
                                      if(status){
                                                //添加属性
                                                //prop：获取在匹配的元素集中的第一个元素的属性值
                                                //prop(参数一，参数二)：参数一：标签名；参数二，参数属性
                                                checks.prop("checked",status);  
                                      }else{
                                                checks.prop("checked",false);
                                      } */
                                      
                                      //方式二
                                       $(":checkbox[name=ck]").prop("checked",this.checked);
                   });
                   
                   
                   
                             //删除全部标签       
                   $("#delAllID").click(function(){
                             //获取选中的复选框并通过爷爷来删除整一行
                              $(":checkbox[name=ck]:checked").parent().parent().remove();
                   });
                   
          });
          
                   //删除一个
                   function del(obj){
                             //方式一
                             //获取父节点
                             //alert(obj.parentNode);
                             
                             //方式二
                             //获取该标签的父标签的父标签然后移除自身
                             $(obj).parent().parent().remove();
                             
                   };
  </script>
  </head>
 
  <body>
    <table border="1" width="600px">
          <tr>
                   <th>选择</th>
                   <th>编号</th>
                   <th>用户名</th>
                   <th>密码</th>
                   <th>年龄</th>
                   <th>住址</th>
                   <th>操作</th>
          </tr>
          <tr id="add">
                   <td><input id="allCheck" type="checkbox" name="allCheck"  /></td>
                   <td colspan="6"><a href="javascript:void(0)" id="delAllID"  >全部删除</a></td>
          </tr>
          
    </table>
   
    <hr/>
    <form>
    <table border="1" width="300px">
          <tr>
                   <td>编号</td>
                   <td><input type="text" name="id" value="1"/></td>
          </tr>
          <tr>
                   <td>用户名</td>
                   <td><input type="text" name="userName" value="2"/></td>
          </tr>
          <tr>
                   <td>密码</td>
                   <td><input type="password" name="userPass"/></td>
          </tr>
          <tr>
                   <td>年龄</td>
                   <td><input type="text" name="age"/></td>
          </tr>
          <tr>
                   <td>住址</td>
                   <td><input type="text" name="c"/></td>
          </tr>
          <tr>
                   <td colspan="2" align="center">
                   <input type="button" value="添加" id="addBtn"/>
                   <input type="reset" value="重置"/>
                   </td>
          </tr>
    </table>
    </form>
  </body>
</html>