Javascript: DropDown Listesine Dayalı Nüfus Yapma Tablosu

Question

Başka bir gönderiden bazı kodlar ödünç aldım, bu yüzden col1 tanımının benim örneğim için gerekli olmadığını anlıyorum, ancak temel olarak bunun yalnızca belirli bir çalışan bilgisi ile doldurmanız gerekir. (vb bordro, vergi,) belli konu:

HTML:

<table class="table table-bordered table-striped"> 
    <tr> 
     <th> 
      <select class="col1 selectTopic"> 
       <option>Payroll</option> 
       <option>Tax</option> 
       <option>Accounts Payable</option> 
      </select> 
     </th> 
    </tr> 
    <tr> 
     <td class="col1 name"></td> 
    </tr> 
    <tr> 
     <td class="col1 photo"></td> 
    </tr> 
     <tr> 
     <td class="col1 email"></td> 
    </tr> 
     <tr> 
     <td class="col1 phone"></td> 
    </tr> 
</table> 

JavaScript: Sen data.topics.topic var

var data = { 
    "contacts": 
{ 
     "contact": [ 
{ 
      "name": "Payroll", 
      "photo": "Emp 1 Photo", 
      "email": "emp1@mysite.com", 
      "phone": "4113834848"}, 
{ 
      "name": "Tax", 
      "photo": "Emp 2 Photo", 
      "email": "emp2@mysite.com", 
      "phone": "4113834848"}, 
{ 
      "name": "Accounts Payable", 
      "photo": "Emp 3 Photo", 
      "email": "emp3@mysite.com", 
      "phone": "4113834848"}, 
]} 
} 

$(".selectTopic").change(function() { 
    var jthis = $(this); 
    var whichCol; 
    if (jthis.hasClass("col1")) { 
     whichCol = "col1"; 
    } 
    $.each(data.topics.topic, function(i, v) { 
     if (v.name == jthis.val()) { 
      $("td." + whichCol + ".name").html(v.name); 
      $("td." + whichCol + ".photo").html(v.photo); 
      $("td." + whichCol + ".email").html(v.email); 
      $("td." + whichCol + ".phone").html(v.phone); 
      return; 
     } 
    }); 

}); 

Answer 1

, sana inanıyorum data.contacts.contact

https://jsfiddle.net/qfy397jt/

tarayıcıda Geliştirici Araçları/bir konsol kullanmayı biliyor musunuz istiyorum? Bu hatanın sebebini size gösterecektir (data.topics tanımsızdır). Dev'i kullanmadıysanız https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/shortcuts?hl=en. araçlar daha önce!