jQuery simpleDemo

最新推荐文章于 2024-08-10 08:36:07 发布

转载最新推荐文章于 2024-08-10 08:36:07 发布 · 382 阅读

文章标签：

#jQuery #simpleDemo

Web前端（Art）专栏收录该内容

37 篇文章

订阅专栏

本文介绍了一个简单的员工管理页面实现方式，使用HTML进行页面布局，并利用jQuery实现动态添加和删除员工信息的功能。此外，还展示了如何通过JavaScript处理表格数据，包括记录数量的计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

[html]view plaincopy 
   
print?
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 <title>员工管理---</title>  
 <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>  
 <script type="text/javascript" src="em.js"></script>  
 </head>  
 <body>  
 <center>  
     <br> <br> 添加新员工 <br> <br>   
     name: <input type="text" name="name" id="name" />     
     email: <input type="text" name="email" id="email" />     
     salary: <input type="text" name="salary" id="salary" /> <br> <br>  
     <button id="addEmpButton">Submit</button>  
     <br> <br>  
     <hr>  
     <br> <br>  
     <table  border="1" cellpadding="5" cellspacing=0>  
         <tbody id="employeetable">  
             <tr>  
                 <th>Name</th>  
                 <th>Email</th>  
                 <th>Salary</th>  
                 <th>操作</th>  
             </tr>  
             <tr>  
                 <td>Tom</td>  
                 <td>tom@tom.com</td>  
                 <td>5000</td>  
                 <td><a href="deleteEmp?id=1">Delete</a></td>  
             </tr>  
             <tr>  
                 <td>Jerry</td>  
                 <td>jerry@sohu.com</td>  
                 <td>8000</td>  
                 <td><a href="deleteEmp?id=2">Delete</a></td>  
             </tr>  
             <tr>  
                 <td>Bob</td>  
                 <td>bob@tom.com</td>  
                 <td>10000</td>  
                 <td><a href="deleteEmp?id=3">Delete</a></td>  
             </tr>  
         </tbody>  
   
     </table>  
 </center>  
 </body>  
 </html>  

em.js

[javascript]view plaincopy 
   
print?
 $(function(){  
     //<button id="addEmpButton">Submit</button>  
     $("#addEmpButton").click(function(){  
         var name = $("#name").val();  
         var email = $("#email").val();  
         var salary = $("#salary").val();  
           
         /* 
             <tr> 
                 <td>name</td> 
                 <td>email</td> 
                 <td>salary</td> 
                 <td><a href="deleteEmp?id=3">Delete</a></td> 
             </tr> 
          */  
         var id = $("tr").size();  
         alert(id);  
         //方法链调用  
         var $tr = $("<tr>").append("<td>"+name+"</td>")  
                     .append("<td>"+email+"</td>")  
                     .append("<td>"+salary+"</td>")  
                     .append('<td><a href="deleteEmp?id='+id+'">Delete</a></td>');  
         $tr.find("a").click(deleteEmp);  
           
         $("tbody").append($tr);  
     });  
       
     var deleteEmp = function(){  
         alert("-----");  
         //this: 代表发生事件的标签  
         $(this).parent().parent().remove();  
           
         return false;//让链接失效  
     };  
       
     //给所有<a>添加点击事件  
     $("a").click(deleteEmp);  
       
 });  

html

[html]view plaincopy 
   
print?
 <!DOCTYPE html>  
 <html>  
     <head>  
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
         <title>选择爱好</title>  
 <script type="text/javascript" src="../js/jquery-1.7.2.js"></script>  
 <script type="text/javascript" src="checkbox.js"></script>  
     </head>  
 <body>  
     <form method="post" action="">  
         <h3>你爱好的运动是？</h3>  
         <input type="checkbox" id="checkedAll_2"/>全选/全不选  
         <br/>  
         <input type="checkbox" name="items" value="足球"/>足球  
         <input type="checkbox" name="items" value="篮球"/>篮球  
         <input type="checkbox" name="items" value="羽毛球"/>羽毛球  
         <input type="checkbox" name="items" value="乒乓球"/>乒乓球  
         <br/>  
         <input type="button" id="CheckedAll" value="全　选"/>  
         <input type="button" id="CheckedNo" value="全不选"/>  
         <input type="button" id="CheckedRev" value="反　选"/>   
       
         <input type="button" id="send" value="提　交"/>   
     </form>  
 </body>  
 </html>  

checkbox.js

[javascript]view plaincopy 
   
print?
 $(function(){  
     //给"全选"添加点击事件  
     $("#CheckedAll").click(function(){  
         //alert("=========");  
         //checked=true  
         $(":checkbox[name=items]").attr("checked", true);  
           
         $("#checkedAll_2").attr("checked", true);  
     });  
       
     //给"全不选"添加点击事件  
     $("#CheckedNo").click(function(){  
         //alert("=========");  
         //checked=true  
         $(":checkbox[name=items]").attr("checked", false);  
         $("#checkedAll_2").attr("checked", false);  
     });  
       
     //给"反选"添加点击事件  
     $("#CheckedRev").click(function(){  
         //var check = this.checked;//得到当前选中的状态  
         //遍历  
         $(":checkbox[name=items]").each(function(){  
             var check = this.checked;//得到当前选中的状态  
             //alert(check);  
             $(this).attr("checked", !check);  
         });  
           
         //如果没有被选中的选项个数为0,就是选中  
         $("#checkedAll_2").attr("checked",$(":checkbox[name=items]:not(:checked)").size()==0 );  
     });  
       
     //给"全选/全不选"添加点击事件  
     $("#checkedAll_2").click(function(){  
         var check = this.checked; //当前点击的"全选/全不选"的状态  
         $(":checkbox[name=items]").attr("checked", check);  
     });  
 });  