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);
                
            }
        });
    }
    
    
    
    
    
    
    
    
});