js控制表格实时编辑

点击添加，在表格的最后一行添加一行表单元素，右侧按钮变为保存和取消。（点击保存，数据用ajax无刷新添加到界面，点击取消，取消此行的添加。）点击编辑，在本行改为表单，带有原来的值，右侧按钮变为确认和取消。

1.建一个容器

<div id="biaoge">
                  <table border="1" cellspacing="0" cellpadding="0" width="800">
                      <tr id="hang"><th>序号</th><th>名称</th><th>链接</th><th id="tianjia"><button id="tj">添加</button></th></tr>
                      
                      
                  </table>
                 </div>

2.js代码

jiazai();
/*1.点击添加*/
$("#tj").click(function(){    /*点击添加，定义一个新的字符串，扔到表格的后面*/
    var str1="<tr><td><input type='text' class='bd1'></td><td><input type='text' class='bd2'></td><td><input type='text' class='bd3'></td><td id='caozuo'><button class='baocun'>保存</button><button class='quxiao'>取消</button></td></tr>";
    $("#biaoge table").append(str1);
    /*点击取消*/
    $(".quxiao").click(function(){
         $(this).parent().parent().remove();      /* 找父级元素，一直找到<tr>,删除这个<tr>*/
        });
    /*点击保存    */
    $(".baocun").click(function(){
          var hang=$(this).parent().parent();       /* 找父级元素，一直找到<tr>,删除这个<tr>*/
          var inpt=hang.find("input");               /* 从<tr>中找到所有的input,再取值*/
          var inpt1=inpt.eq(0).val();
          var inpt2=inpt.eq(1).val();
          var inpt3=inpt.eq(2).val();
          qikoo.dialog.confirm('确认保存？',function(){
                 $.ajax({
                  url:"../chuli/caidanchuli.php",
                  data:{type:2,inpt1:inpt1,inpt2:inpt2,inpt3:inpt3},
                  type:"POST",
                  dataType:"TEXT",
                  success: function(data)
                  {
                      if(data=="ok")
                          {
                             history.go(0); 
                              }else if(data=="kong")
                              {
                                  alert("栏目名称不能为空");
                                  }
                      }
                  
                  })
                },function(){
                
            });    
         
          
        });
    
    });

/*2.点击删除*/
$(".shanchu").click(function(){
    var bs=$(this).attr("bs");
    qikoo.dialog.confirm('确认删除？',function(){
                $.ajax({
                    url:"../chuli/caidanchuli.php",
                    data:{type:1,bs:bs},
                    type:"POST",
                    dataType:"TEXT",
                    success: function(data)
                    {
                        if(data=="ok")
                        {
                             history.go(0);
                            }else
                            {
                                
                                }
                        }
                    
                    })
                },function(){
                    
            });    
    
    });
    
    
    
//3.点击编辑    
$(".bianji").click(function(){
          var hang=$(this).parent().parent();
          var td=hang.find("td");
          var td1=td.eq(0).text();
          var td2=td.eq(1).text();
          var td3=td.eq(2).text();
          var bs1=$(this).attr("bs1");
          var addtd="<tr><td><input type='text' class='bd1' value='"+td1+"'/></td><td><input type='text' class='bd2' value='"+td2+"'/></td><td><input type='text' class='bd3' value='"+td3+"'/></td><td id='caozuo'><button class='queren' bs2='"+bs1+"'>确认</button><button class='quxiao'>取消</button></td></tr>";
          hang.replaceWith(addtd);    /*点击编辑，定义一个新的字符串，带有原来的值的表单，然后把原来的<tr>替换*/
          
        /*  点击取消*/
        $(".quxiao").click(function(){
             $(this).parent().parent().remove();
             history.go(0);
            });
            
        /*点击确认    */
        $(".queren").click(function(){
                  
                  var hang=$(this).parent().parent();
                  var inpt=hang.find("input");
                  var inpt1=inpt.eq(0).val();
                  var inpt2=inpt.eq(1).val();
                  var inpt3=inpt.eq(2).val();
                  var bs2=$(this).attr("bs2");
                  qikoo.dialog.confirm('确认修改？',function(){
                                $.ajax({
                                      url:"../chuli/caidanchuli.php",
                                      data:{type:3,inpt1:inpt1,inpt2:inpt2,inpt3:inpt3,bs2:bs2},
                                      type:"POST",
                                      dataType:"TEXT",
                                      success: function(data)
                                      {
                                          if(data=="ok")
                                              {
                                                 history.go(0); 
                                                  }else if(data=="kong")
                                                  {
                                                      alert("栏目名称不能为空");
                                                      }
                                          }
                                      
                                      })
                        },function(){
                        
                    });    
                 
                  
                });

            
            });
            
          






function jiazai()         /*加载数据*/
{
            $.ajax({
            data:{type:0},
            type:"post",
            url:"../chuli/caidanchuli.php",
            async:false,
            datatype:"TEXT",
            success:function(data)
            {
                var str="";
                var hang=data.split("|");
                for(var i=0;i<hang.length;i++)
                {
                    var lie=hang[i].split("^");
                    str=str+"<tr><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td id='caozuo'><button class='bianji' bs1='"+lie[0]+"'>编辑</button><button class='shanchu' bs='"+lie[0]+"'>删除</button></td></tr>";
                    }
                    $("#biaoge table").append(str);
                
            }
        });
    }
    
    
    
    
    
    
    
    
});