使用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

Answer 1

检查这个小提琴js小提琴

这是我修改过的代码。

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

请检查这个小提琴 。 您有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);
}