2016-03-11 11 views
0

如何在窗體中再次獲取特定行數據作爲編輯的特定文本,因爲我的代碼在窗體中爲我提供了所有行數據,當我單擊時如何獲取特定行數據特定的行按鈕。 Actully當我點擊編輯按鈕,它增加了兩行數據比再次顯示它變成形式如何在窗體中再次獲取特定行數據以便編輯

$(document).ready(function() 
    { 
     var count   = 1; 
     $("#submit_Button").on('click',function() 
     {  
      var fname_Field = $("#fname1").val(); 
      var lname_Field = $("#lname1").val(); 
      var address_Field = $("#address1").val(); 


      if($("#fname1").val() == null ||$("#fname1").val() == "" && $("#lname1").val() == null ||$("#lname1").val() == "" && $("#address1").val() == null ||$("#address1").val() == "") 
      { 
       alert("Please fill the form"); 
      }   

      $(".above_Info").append('<tr class="tr_Number"><td id="count_Field">'+count+'</td><td class="first_Name">'+fname_Field+'</td><td class="last_Name">'+lname_Field+'</td><td class="addr">'+address_Field+'</td><td id="button_Edit"><input type="button" name="edit" class="edit_Button" value="Edit"/></td></tr>'); 
      count++; 
     }); 




     $(document).on('click',".edit_Button",function() 
     { 
      var row  = $("#tbl > tbody > tr").length;   
      var fname = $("#tbl").find(".first_Name").text();     
      var lname = $("#tbl").find(".last_Name").text();    
      var addrs = $("#tbl").find(".addr").text();  
      var x  = $("#fname1").val(fname);  
      var y  = $("#lname1").val(lname); 
      var z  = $("#address1").val(addrs);     
     }); 
    }); 

    </script> 
    <style> 
    .form{margin-left:200px; 
    } 

    #address1{margin-left:25px;} 
    #fname1, #lname1{margin-left:9px; 
    } 
    #submit_Button{ 
     margin-left:95px; 
    }  
    .above_Info{margin-left:200px; 
       width:auto; 
       height:auto; 
       border:1px solid #000; 
    } 
    </style> 
    </head> 
    <body> 
    <form name="myForm" class="form"> 
    First Name :<input type="text" name="fname" id="fname1" /><br /> 
    Last Name :<input type="text" name="lname" id="lname1" /><br /> 
     Address :<input type="text" name="address" id="address1" /><br /><br /><br /> 
    <input type="button" name="Submit" value="Submit" id="submit_Button" /> 
    </form> 
    <br /> 
    <br /> 
    <br /> 
    <table class="above_Info" id="tbl"> 
    </table> 
    </body> 
    </html> 

回答

2

你需要這樣做在點擊的按鈕$(this)方面:

$(document).on('click',".edit_Button",function(){ 
    // var row  = $("#tbl > tbody > tr").length; 
    var $tr  = $(this).closest("tr");  
    var fname = $tr.find(".first_Name").text(); 
    var lname = $tr.find(".last_Name").text();    
    var addrs = $tr.find(".addr").text(); 
    $("#fname1").val(fname);  
    $("#lname1").val(lname); 
    $("#address1").val(addrs);     
}); 

按你的新評論你必須清空輸入文檔準備好像這樣:

$(document).ready(function(){ 
    $("#fname1, #lname1, #address1").val(''); 

    // all other code as is. 

}); 
+0

如何獲取空字段時,我點擊子在這個代碼中,它獲得submited,但是這些值在doc準備就緒時不會消失 – Shanky

+0

只需填充空白值:'$(「#fname1,#lname1,#address1」)。val('');請' – Jai

+0

請詳細說明。我應該在哪裏寫這個在最後或準備好的功能? – Shanky

相關問題