简体   繁体   中英

Javascript: Populating Table Based On DropDown List

I borrowed some code from another post, so I realize that the col1 designation isn't necessary for my example, but basically this just needs to populate with a certain employees information when you choose a certain topic (payroll, tax, etc.):

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:

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;
        }
    });

});

You have data.topics.topic , I believe you want data.contacts.contact

https://jsfiddle.net/qfy397jt/

Do you know how to use Developer Tools/a console in the browser? It would've shown you the cause of this error (that data.topics is undefined). https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/shortcuts?hl=en for if you haven't used Dev. tools before!

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM