使用jquery val设置值到输入字段val不工作。我已经在edit（）函数中注释掉了代码设置值

Question

/*使用Jquery val设置值到输入字段不起作用。我已经在编辑中注释了代码设置值（）function.if我尝试设置值的表数据本身不displayed.I想编辑perticular行的数据*/

小提琴here

<style type="text/css"> 
      table,tr,td,th{border:1px solid green;border-collapse:collapse;} 

       th{background-color:#A7C942;color:white;} 

       tr:nth-child(2n){background-color:#EAF2D3;} 

       .controls{ width:200px;padding:15px;border:1px solid gray;height:400px; margin:10px;} 
      .controls label{float:left;width:100%;} 

       .controls input,controls button{float:left;width:100%; margin-bottom:10px;} 
      .red{background-color:red;} 
     </style> 

脚本如下：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
     <script type="text/javascript"> 
     data=[{id:0,firstName:"Mahesh",lastName:"Hegde",city:"Sirsi",state:"Karnataka",pin:581315}, 
     {id:1,firstName:"Rajesh",lastName:"Hegde",city:"Kumta",state:"Karnataka",pin:581311}, 
     {id:2,firstName:"Karthhik",lastName:"bhat",city:"Ankola",state:"Karnataka",pin:581316}, 
     {id:3,firstName:"Mahantesh",lastName:"naik",city:"Honnavar",state:"Karnataka",pin:581317}]; 

      $(document).ready(function(){ 
       displayRecords(data); 
      }); 
     function displayRecords(data){ 
      for(i=0;i<data.length;i++){ 
      var html='<tr id="'+data[i].id+'"><td>'+data[i].firstName+'</td><td>'+data[i].lastName+'</td><td>'+data[i].city+'</td><td>'+data[i].state+'</td><td>'+data[i].pin+'</td><td><a href="#" onclick="edit('+data[i].id+')">Edit</a></td><td><a href="#" onclick="deleteRecord('+data[i].id+')">Delete</a></td></tr>'; 
      $("#jsondata tbody:last").append(html); 
      } 
     } 
     function deleteRecord(id){ 
     $("#"+id).remove(); 
     } 
     function addRrecord(){ 
     var totalRecords=data.length; 
       //var objRecord={taskId:recordsCount,description:'Task-1_' +recordsCount,assignedTo:"Ravi_"+recordsCount,dueDate:'12/08/2012_'+recordsCount}; 
       var newRecord={ 
         id:totalRecords, 
         firstName:$("#firstName").val(), 
         lastName:$("#lastName").val(), 
         city:$("#city").val(), 
         state:$("#state").val(), 
         pin:$("#pin").val() 
         }; 

       if($("#firstName").val() !=='' &&$("#lastName").val()!=='' && $("#city").val()!==''&& $("#state").val()!==''&& $("#pin").val()!=='') 
       { 
        data.push(newRecord); 
        //displayRecords(data); 
        var html='<tr id="'+newRecord.id+'"><td>'+newRecord.firstName+'</td><td>'+newRecord.lastName+'</td><td>'+newRecord.city+'</td><td>'+newRecord.state+'</td><td>'+newRecord.pin+'</td><td><a href="#" onclick="edit('+newRecord.id+')">Edit</a></td><td><a href="#" onclick="deleteRecord('+newRecord.id+')">Delete</a></td></tr>'; 
        $("#jsondata tbody:last").append(html); 
        //$("#firstName").val()=='';$("#lastName").val()=='';$("#city").val()==''; $("#state").val()==''; $("#pin").val()==''); 
       } 
       else 
       { 
        alert("Please fill all the fields"); 
       } 
     } 
     function edit(id){ 
         /*$("#firstName").val(data[id].firstName); 
         $("#lastName").val(data[id]lastName); 
         $("#city").val(data[id]city); 
         $("#state").val(data[id]state); 
         $("#pin").val(data[id]pin); 
         };*/ 
     } 

     </script> 

HTML：

  <table id="jsondata"> 
       <tr><th>First name</th> 
        <th>Last name</th> 
        <th>City</th> 
        <th>State</th> 
        <th>PIN</th> 

        <th colspan=2>Action</th> 
       </tr> 
       <tbody> 
       </tbody> 
      </table>  
      <div class="controls"> 
       <label for="firstName">First Name</label><input type="text" id="firstName"> 
       <label for="lastName">Last Name</label><input type="text" id="lastName"> 
       <label for="city">City</label><input type="text" id="city"> 
       <label for="state">State</label><input type="text" id="state"> 
       <label for="pin">PI`enter code here`N</label><input type="text" id="pin"> 
       <input type="button" value="Add record" id="add" onclick=addRrecord();> 
       <input type="button" value="Update record" id="update"> 
      </div> 

http://jsfiddle.net/z9QdK/5/

[1]: http://i.stack.imgur.com/mBQJv.gif 

Answer 1

检查此琴 js fiddle

这里是我已经修改了代码。

function edit(id){ 
    $("#firstName").val(data[id].firstName); 
    $("#lastName").val(data[id].lastName); 
    $("#city").val(data[id].city); 
    $("#state").val(data[id].state); 
    $("#pin").val(data[id].pin); 

} 

Answer 2

请检查这个fiddle。你有ID冲突的问题。

data=[{id:0,firstName:"Mahesh",lastName:"Hegde",city:"Sirsi",state:"Karnataka",pin:581315}, 
    {id:1,firstName:"Rajesh",lastName:"Hegde",city:"Kumta",state:"Karnataka",pin:581311}, 
    {id:2,firstName:"Karthhik",lastName:"bhat",city:"Ankola",state:"Karnataka",pin:581316}, 
    {id:3,firstName:"Mahantesh",lastName:"naik",city:"Honnavar",state:"Karnataka",pin:581317}]; 

$(document).ready(function(){ 
    displayRecords(data); 

    $('body').on('click', 'a', function() { 
     var id = $(this).parents('tr').attr('id'); 
     edit(id); 
    }); 
}); 

function displayRecords(data){ 
    for(i=0;i<data.length;i++){ 
    var html='<tr id="'+data[i].id+'"><td>'+data[i].firstName+'</td><td>'+data[i].lastName+'</td><td>'+data[i].city+'</td><td>'+data[i].state+'</td><td>'+data[i].pin+'</td><td><a href="#">Edit</a></td><td><a href="#" onclick="deleteRecord('+data[i].id+')">Delete</a></td></tr>'; 
    $("#jsondata tbody:last").append(html); 
    } 
} 

function deleteRecord(id){ 
    $("#"+id).remove(); 
} 

function addRrecord(){ 
var totalRecords=data.length; 
     //var objRecord={taskId:recordsCount,description:'Task-1_' +recordsCount,assignedTo:"Ravi_"+recordsCount,dueDate:'12/08/2012_'+recordsCount}; 
     var newRecord={ 
       id:totalRecords, 
       firstName:$("#firstName").val(), 
       lastName:$("#lastName").val(), 
       city:$("#city").val(), 
       state:$("#state").val(), 
       pin:$("#pin").val() 
       }; 

     if($("#firstName").val() !=='' &&$("#lastName").val()!=='' && $("#city").val()!==''&& $("#state").val()!==''&& $("#pin").val()!=='') 
     { 
      data.push(newRecord); 
      //displayRecords(data); 
      var html='<tr id="'+newRecord.id+'"><td>'+newRecord.firstName+'</td><td>'+newRecord.lastName+'</td><td>'+newRecord.city+'</td><td>'+newRecord.state+'</td><td>'+newRecord.pin+'</td><td><a href="#">Edit</a></td><td><a href="#" onclick="deleteRecord('+newRecord.id+')">Delete</a></td></tr>'; 
      $("#jsondata tbody:last").append(html); 
      //$("#firstName").val()=='';$("#lastName").val()=='';$("#city").val()==''; $("#state").val()==''; $("#pin").val()==''); 
     } 
     else 
     { 
      alert("Please fill all the fields"); 
     } 
} 

function edit(id){ 
    $("#firstName1").attr('value', data[id].firstName); 
    $("#lastName1").attr('value', data[id].lastName); 
    $("#city1").attr('value', data[id].city); 
    $("#state1").attr('value', data[id].state); 
    $("#pin1").attr('value', data[id].pin); 
}