使用javascript填充表格行數據

Question

我無法用表格數據填充表格。表格處於模式對話框中，我希望對話框彈出時用戶點擊字形，字形鉛筆。

我已經看過Fill form using table data，How to fill input fields in form with data from row in html table I want to edit，jQuery dynamic fill in form fields with table data，並且Automatic fill a table with data using JavaScript and JSON，沒有他們的解決方案，爲我工作，所以請大家幫忙。 這裏是模態和表單代碼：

<div class="modal fade" id="New-Employee-Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title" id="myModalLabel">Employee</h4> 
      </div> 
      <div class="modal-body"> 

       <div id="data"> 
        <form id="person"> 
         <div class="form-group"> 
          <label class="control-label">First Name:</label> 
          <input class="form-control" id="FirstName" name="FirstName" type="text"> 
         </div> 
         <div class="form-group"> 
          <label class="control-label">Last Name:</label> 
          <input class="form-control" id="LastName" name="LastName" type="text"> 
         </div> 
         <div class="form-group"> 
          <label class="control-label">Net Id:</label> 
          <input class="form-control" id="NetId" name="Netid" type="text"> 
         </div> 
         <div class="form-group"> 
          <label class="control-label">Phone #:</label> 
          <input class="form-control" id="PhoneNumber" name="PhoneNumber" type="tel" required /> 
         </div> 

         <div class="form-group"> 
          <label class="control-label">Email:</label> 
          <input class="form-control" id="Email" name="Email" type="text"> 
         </div> 
         <div class="form-group"> 
          <label class="control-label">Role</label> 
          <input class="form-control" id="Role" name="Role" type="text"> 

         </div> 
         <div class="form-group"> 
          <label class="control-label">Active:</label> 
          <br /> 
          <input name="Active" type="radio" value='<span class="glyphicon glyphicon-ok-circle">' /> Active 
          <br /> 
          <input name="Active" type="radio" value='<span class="glyphicon glyphicon-ban-circle">' /> Not Active 
         </div> 
        </form> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" onclick="ResetForm()">Reset</button> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="AddData()">Save</button> 
       </div> 
      </div> 
     </div> 
    </div> 

下面是表的一部分：

<div id="tab"> 
    <table class="table table-striped" id="list"> 
     <thead> 
      <tr> 
       <th>First Name</th> 
       <th>Last Name</th> 
       <th>Net ID</th> 
       <th>Phone #</th> 
       <th>Email</th> 
       <th>Active</th> 
       <th>Role</th> 
       <th>Action</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Joel</td> 
       <td>lewis</td> 
       <td>lewisj</td> 
       <td>333-555-3667</td> 
       <td>lewisj@gmail.com</td> 
       <td> 
        <a id="icon-toggle" class="btn-default"> 
         <span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span> 
        </a> 
       </td> 
       <td>Developer</td> 
       <td> 
        <span class="glyphicon glyphicon-pencil" data-target="#New-Employee-Modal" onclick="UpdateForm()" aria-hidden="true"></span> 
        <a id="icon-toggle-delete" class="removebutton"> 
         <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 
        </a> 

       </td> 
      </tr> 

這裏是JavaScript：

function AddData() { 
    var rows = ""; 
    var FirstName = document.getElementById("FirstName").value; 
    var LastName = document.getElementById("LastName").value; 
    var NetId = document.getElementById("NetId").value; 
    var PhoneNumber = document.getElementById("PhoneNumber").value.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3'); 
    var Email = document.getElementById("Email").value; 
    var Active = document.querySelector('input[name="Active"]:checked'); 
    Active = Active ? Active.value : ''; 
    var Role = document.getElementById("Role").value; 
    rows += "<td>" + FirstName + "</td><td>" + LastName + "</td><td>" + NetId + "</td><td>" + PhoneNumber + "</td><td>" + Email + "</td><td>" + Active + "</td><td>" + Role + '</td><td> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> <a id="icon-toggle-delete2" class="removebutton"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> </a></td>'; 
    var tbody = document.querySelector("#list tbody"); 
    var tr = document.createElement("tr"); 

    tr.innerHTML = rows; 
    tbody.appendChild(tr) 

} 

function UpdateForm() { 

    $('span.glyphicon glyphicon-pencil').click(function() { 
     //! Don't know what do here 
    }); 

} 

function ResetForm() { 
    document.getElementById("person").reset(); 
} 

這裏是的jsfiddle http://jsfiddle.net/neu4gh37/2/

Answer 1

您可以使用這樣的代碼示例。注意，你不需要調用UpdateForm()與onclick事件，您的jQuery的選擇「span.glyphicon鉛筆」加入這個事件（我固定它一點）

$('span.glyphicon-pencil').click(function() { 
    var formFields = []; 
    var $target = $(event.target); 
    var $row = $target.closest('tr'); 
    $row.find('td').each(function (index, el) { 
     var fieldValue = $(el).html(); 
     switch (index) { 
      case 0: 
       formFields['FirstName'] = fieldValue; 
       break; 
      case 1: 
       formFields['LastName'] = fieldValue; 
       break; 
      default: 
       break; 
     } 
    }); 

    fillForm(formFields); 
}); 

function fillForm(data) { 
    var $form = $('#person'); 
    $form.find('input').each(function() { 
     var $input = $(this); 
     switch ($input.attr("name")) { 
      case 'FirstName': 
       $input.val(data['FirstName']); 
       break; 
      case 'LastName': 
       $input.val(data['LastName']); 
       break; 
      default: 
       break; 

     } 
    }); 
}