java学习

java学习

 

纯javascript和jquery实现增删改查

<html>
 <head>
<script src="jquery.js" type="text/javascript"></script>

 </head>
 <body>
  <form class="cmxform" id="commentForm" method="get" action="#"  style="float:left;position:absolute ;background-color: yellow;width:100%;height:100% " >
 <fieldset style="width:100%;height:100%">
 
   <p>
     <label for="cusername">姓名</label>
     <em>*</em><input id="cusername" name="username" size="25"   />
   </p>
   <p>
     <label for="cemail">电子邮件</label>
     <em>*</em><input id="cemail" name="email" size="25"    />
   </p>
   <p>
     <label for="curl">网址</label>
     <em>  </em><input id="curl" name="url" size="25"  value=""  />
   </p>
   <p>
     <label >价格</label>
     <em>  </em><input id="cprice" name="price" size="25"  value=""  />
   </p>
   <p>
     <label for="ccomment">你的评论</label>
     <em>*</em><textarea id="ccomment" name="comment" cols="22"  ></textarea>
   </p>
   <p>
     <input class="submit" type="button" value="提交"/>
   <input class="quxiao" type="button" value="取消"/>
   </p>
 </fieldset>
 </form>
 <div>
 <form>
    <input type="text" id="chaxun" /><input type="button" value="查询" />
 </form>
 <div>
  <input type="button" value="全选/全不选"  id="CheckedAll"/>
  <input type="button" value="反选" id='CheckedRev' />
  <input id="add" type="button" value="新增"/>
  <input type="button" value="删除" class="deleteall" />
 </div>
 </div>
 <table cellpadding="0" cellspacing="0" border="1" width="100%">
 <thead><tr><td>姓名</td><td>电子邮件</td><td>网址</td><td>你的评论</td><td>价格</td><td>编辑</td><td>删除</td></tr></thead>
 <tbody>
  <tr></tr>
 </tbody>
 <tfoot>
  <tr><td>总价</td><td   colspan="6">0</td></tr>
 </tfoot>
 </table>
 </body>
  <script type="text/javascript">
  $(document).ready(function(){
  //  $("#commentForm").validate({meta: "validate"});
 $("#commentForm").hide();
 $("#add").bind("click",function(){
  
     if($("#commentForm").is(":visible")){
   $("#commentForm").hide();
  }else{
   $("#commentForm").show();
  }
 })
 var num = 1;
 $(".submit").click(function(){
 $("#commentForm").hide();
 var name = $('#cusername').val();
 var email = $('#cemail').val();
 var url = $('#curl').val();
 var price = $('#cprice').val();
 var comment = $('#ccomment').val();

 var tr = $('<tr class="'+num+'"><td class="jsname"><input type="checkbox" value="'+num+'"/>'+name+'</td><td class="jsemail">'+email+'</td><td class="jsurl">'+url+'</td><td class="jscomment">'+comment+'</td><td class="jsprice" id="'+num+'">'+price+'</td><td><a href="#" class="edit">编辑</a></td><td><a href="#" class="delete">删除</a></td></tr>');
 $('tbody tr:eq(0)').after(tr);
 
 
 num++;
 });
 $(".quxiao").click(function(){
 $("#commentForm").hide();
 });
 $('.delete').live('click',function(){
  $(this).parent().parent().remove();
 });
 $('.edit').live('click',function(){
   var tr=$(this).parent().parent();
   var name = tr.children('.jsname').text();
   var email = tr.children('.jsemail').text();
   var url = tr.children('.jsurl').text();
   var comment = tr.children('.jscomment').text();
   var price = tr.children('.jsprice').text();
   $('#cusername').attr('value',name);
   $('#cemail').attr('value',email);
   $('#curl').attr('value',url);
   $('#cprice').attr('value',price);
   $('#ccomment').attr('value',comment);
   $("#commentForm").show();
    $(this).parent().parent().remove();
 }); 
 $('.deleteall').click(function(){
  $('input[type="checkbox"]:checked').each(function(){
    $(this).parent().parent().remove();
  });
 });
 var a = true;
  $("#CheckedAll").click(function(){
   //所有checkbox跟着全选的checkbox走。
   if(a){
   $('input[type="checkbox"]:checkbox').attr("checked", true);
   a = false;
   }else {
    $('input[type="checkbox"]:checkbox').attr("checked", false);
    a=true;
   }
   
  });
 
  $("#CheckedRev").click(function(){
    $('input[type="checkbox"]:checkbox').each(function(){
  
   this.checked=!this.checked;
    });
  });
  });
  </script>
</html>

posted on 2013-08-16 16:27 杨军威 阅读(553) 评论(0)  编辑  收藏


只有注册用户登录后才能发表评论。


网站导航:
 

导航

统计

常用链接

留言簿

随笔档案

搜索

最新评论

阅读排行榜

评论排行榜