2016-03-11 2 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);     
}); 

В соответствии с ваш новый комментарий вам нужно опорожнить входы на doc ready, как:

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

    // all other code as is. 

}); 
+0

как я могу получить пустые поля, когда я нажимаю на суб mit, как в этом коде, он отправляется, но эти значения не исчезают – Shanky

+0

на готовом doc просто заполняют пустые значения: '$ (" # fname1, # lname1, # address1 "). val (''); ' – Jai

+0

не могли бы вы продумать. где я должен писать это в конце или в готовой функции? – Shanky

Смежные вопросы