javascript - Jquery val を使用して入力フィールドに値を設定すると機能しません。edit() 関数でコード設定値をコメントアウトしました

Question

/* Jquery val を使用した入力フィールドへの値の設定が機能しない.edit()関数でコード設定値をコメントアウトしました.値を設定しようとするとテーブルデータ自体が表示されません.特定の行のデータを編集したかった.*/

ここでフィドル

  <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