蓝客社区

游客 您好,登录 | 注册

致蓝客社区的会员们:
即日起,社区论坛部分技术交流版块启用身份验证机制,须符合该版块要求的技术标准才能进入,不便之处敬请见谅!
网络信息安全交流QQ群:187228、会员交流聊天QQ群:42417627
论坛 » WEB编程技术 » jquery //实现修改但这只能修改一次想想怎么可以实现多次修改?

jquery //实现修改但这只能修改一次想想怎么可以实现多次修改? (1蓝豆) (直接结帖)

ITFOR积分等级:LV0 经验等级:Exp0
#1发表于 2013-05-29 19:39 回复:1 查看:14358
<script src="scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $("button").click(function(){
   var $editRow = $("<tr><td><input class='txt' type='text' value=' ' /></td><td><input class='txt' type='text' value=' ' /></td><td><input id='radMale' name='sex' type='radio' value='男' checked='checked' />男<input id='radFemale' name='sex' type='radio' value='女' />女</td><td><a class='submit' href='#'>确定</a><a class='cancel' href='#'>取消</a></td></tr>");
    $("table").append($editRow);
 /*取消*/
    $(".cancel").live("click", function () {
      $(this).parent().parent().remove();
 }); 
    $(".submit").live("click", function () {
 //创建一个没有数据的初始表格行
    var $updateRow = $("<tr><td></td><td></td><td></td><td><a class='edit' href='#'>修改</a><a class='del' href='#'>删除</a></td></tr>");
    var $tr = $(this).parent().parent();
    /*取值*/
    var name =$.trim($tr.find("td:eq(0) input").val()); //去除头尾空格
    var age = $.trim($tr.find("td:eq(1) input").val());
    var sex = $.trim($tr.find("td:eq(2) input:checked").val());
    //向目标(即向初始化的表格行添加刚得到的数据)
 $updateRow.find("td:eq(0)").text(name)
               .end().find("td:eq(1)").text(age)
            .end().find("td:eq(2)").text(sex);    
       $tr.replaceWith($updateRow);
  //实现修改但这只能修改一次想想怎么可以实现多次修改
  
  $(".edit").live("click",function(){
   $updateRow.replaceWith($tr);   
  });
  
  //实现删除行
  $(".del").live("click",function(){
   $(this).parent().parent().remove();   
     });  
                });
            });
        });
  
  -->点击按钮--->追加行到表格后面-->添加事件-->删除事件-->确定事件()-->
</script>


ITFOR积分等级:LV0 经验等级:Exp0
#2发表于 2013-05-29 19:52
坐等解决。。。。