JQuery动态操作表格(添加、删除、多选、全选删除行操作)

JQery动态操作表格,能够实现 添加行,多选、全选行、删除行操作,这是一个很有参考价值的JQuery适时控制表格的一个功能,含有丰富的注释,方便大家研究学习。

<%@ page language="java"  pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
 <title>JQuery单元格新增与删除</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">
 <script src="
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script type="text/javascript">
  $(function(){
    //添加单元表格行信息
    $("#saveInfo").bind("click",function(){
      $("#tb").append("<tr align='center'><td><input type='checkbox'/></td><td>"+$("#UserName").val()+"</td><td>"+$("#PassWord").val()+"</td></tr>");
    });
    //重置用户添加信息
    $("#deleteInfo").bind("click",function(){
      $("#UserName").val("");//置用户名值为空
      $("#PassWord").val("");//置密码值为空
    });
    //单元表格行全选
    $("#SelectAll").bind("click",function(){
      $("#tb tbody tr td input").attr("checked",true);
    });
    //删除单元格行信息
    $("#Delete").bind("click",function(){
      $("#tb tbody tr td input:checked").parent().parent().remove();
    });
   }); 
 </script>
</head>
<body>
 <table align="center" border="0">
  <tr>
   <td>用户名:</td><td><input type="text" id="UserName"/></td>
   </tr>
  <tr>
   <td>密&nbsp;&nbsp;码:</td><td><input type="text" id="PassWord"/></td> 
  </tr> 
  <tr>
   <td><input type="button" value="确&nbsp;&nbsp;认" id="saveInfo"/></td>
   <td><input type="reset" value="重&nbsp;&nbsp;置" id="deleteInfo"/></td> 
  </tr> 
 </table>
 <table align="center" border="1" width="70%" id="tb">
  <thead>
   <tr>
    <th><input type="button" id="SelectAll" value="全选"/>&nbsp;&nbsp;<input type="button" id="Delete" value="删除"/></th>
    <th>用户名</th>
    <th>密&nbsp;&nbsp;码</th>
   </tr>
  </thead>
  <tbody></tbody>
  </table>
</table>
</html>

你可能感兴趣的:(JQuery动态操作表格(添加、删除、多选、全选删除行操作))