用一组对象填充表

Question

我有一个表，我需要填充来自对象数组的数据。 该表看起来像这样 。

问题是，如果我点击任何一行，它会显示来自endpointsData数组的最后一个对象的数据（ {epid: 4... etc）。 我想要的是在正确的地方获得正确的数据。

例如，对于包含此对象数据的第1行：

{
  "nodeid": 1,
  "vendor": "0x0345",
  "product_id": "0x0201",
  "product_type": "0x0008",
  "home_id": "0xD087E344",
  "secure": "1",
},

单击它之后，在其下面打开的div必须包含以下数据：

{
  "epid": 1,
  "clslist": "5f",
  "type": "0x02,0x01",
  "zplus": "0x00,0x00,0x00,0x0000,0x0000"
},

但正如您在演示中看到的，我点击它的任何行都会显示以下数据：

{
  "epid": 4,
  "clslist": "134,547,843,122",
  "type": "2x07,0x01",
  "zplus": "3x44,0x0d01,0x1ed01"
},

关于我做错了什么的任何想法？

代码（根据要求）：

 function insertObject() { var data = [{ "nodeid": 1, "vendor": "0x0345", "product_id": "0x0201", "product_type": "0x0008", "home_id": "0xD087E344", "secure": "1", }, { "nodeid": 2, "vendor": "0x0285", "product_id": "0x0777", "product_type": "0x0001", "home_id": "0xD087D213", "secure": "0", }, { "nodeid": 3, "vendor": "0x1145", "product_id": "0x7899", "product_type": "0x0851", "home_id": "0xD034T13", "secure": "0", }, { "nodeid": 4, "vendor": "0x8992", "product_id": "0x1236", "product_type": "0x8101", "home_id": "0xD0682F13", "secure": "1", } ]; var endpointsData = [{ "epid": 1, "clslist": "5f", "type": "0x02,0x01", "zplus": "0x00,0x00,0x00,0x0000,0x0000" }, { "epid": 2, "clslist": "20,5e,72,86,59,73,5a,8f,98,7a,80,71,85,5c,70,30,31,84", "type": "0x07,0x01", "zplus": "0x01,0x00,0x06,0x0c07,0x0c07" }, { "epid": 3, "clslist": "20,5e,72,86,59,73,5a,8f,98,7a,80,71,85,5c,70,30,31,84", "type": "0x07,0x01", "zplus": "0x01,0x00,0x06,0x0d01,0x0d01" }, { "epid": 4, "clslist": "134,547,843,122", "type": "2x07,0x01", "zplus": "3x44,0x0d01,0x1ed01" }, ]; //populate the table with data from "data" object var tbl = document.getElementById('tableData'); var tblBody = document.getElementById('tableBody'); for (var i = 0; i < data.length; i++) { var row = document.createElement('tr'); row.classList.add("header"); for (var value in data[i]) { var cell = document.createElement("td"); var cellText = document.createTextNode(data[i][value]); cell.appendChild(cellText); row.appendChild(cell); } tblBody.appendChild(row); } //populate #divTemplate with data from "endpointsData" object var key = ["epid", "clslist", "type", "zplus"]; for (var d = 0; d < endpointsData.length; d++) { var endValue = {}; endValue = endpointsData[d]; for (var k = 0; k < key.length; k++) { if (endpointsData[d]) { $('#' + key[k]).text(endValue[key[k]]); } } } //create a row for displaying the #divTemplate data var $contentCell = $("#divTemplate"); var $newRow = $("<tr style='display: none;'><td colspan='6'></td></tr>"); $newRow.find('td').append($contentCell); $("tr.header:not(#hDeselect)").after($newRow); $('tr.header').click(function() { $contentCell.show(); $(this).next('tr').css('display', function() { return this.style.display == 'none' ? 'table-row' : 'none' }); }); } insertObject(); 

 th { white-space: nowrap; color: #D5DDE5; background: #1b1e24; border-bottom: 4px solid #9ea7af; border-right: 1px solid #343a45; font-size: 23px; font-weight: 100; padding: 24px; text-align: left; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); vertical-align: middle; } tr { border-top: 1px solid #C1C3D1; border-bottom-: 1px solid #C1C3D1; color: #666B85; font-size: 16px; font-weight: normal; text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1); cursor: pointer; } /*grey row*/ tr:hover td { background: #4E5066; color: #FFFFFF; border-top: 1px solid #22262e; } tr:nth-child(odd) td { background: #EBEBEB; } tr:nth-child(odd):hover td { background: #4E5066; } td { text-align: center; background: #FFFFFF; vertical-align: middle; font-weight: 300; font-size: 18px; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1); border-right: 1px hidden #C1C3D1; } tr:hover a { text-decoration: none; color: white; } tr a { text-decoration: none; color: black; } tr.header { display: table-row; } .rounded-list label { position: relative; display: block; padding: .4em .4em .4em 2em; *padding: .4em; margin: .5em 0; background: #ddd; color: #444; text-decoration: none; border-radius: .3em; } button { position: relative; display: block; margin: .5em 0; background: #87ceeb; color: #444; text-decoration: none; border-radius: .5em; } .rounded-list label:hover, button { background: #eee; } .rounded-list label:before { content: counter(li); counter-increment: li; position: absolute; left: -1.3em; top: 50%; margin-top: -1.3em; background: #87ceeb; height: 2em; width: 2em; line-height: 2em; border: .3em solid #fff; text-align: center; font-weight: bold; border-radius: 2em; transition: all .3s ease-out; } #name, #loc:focus { outline: 0px solid transparent; } #tableheader { cursor: default; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="tableData"> <thead> <tr id="tableheader"> <th>NODE ID</th> <th>VENDOR</th> <th>PRODUCT ID</th> <th>PRODUCT TYPE</th> <th>HOME ID</th> <th>SECURE</th> </tr> </thead> <tbody id="tableBody"> </tbody> <div id="divTemplate"> <ol class="rounded-list"> <li><label>ID: <input id="roomName"/></label></li> <li><label>LOC. NAME: <input id="loc"/></label></li> <li><label>EPID: <span id="epid"></span></label></li> <li><label>CLSLIST: <span id="clslist"></span></label></li> <li><label>TYPE: <span id="type"></span></label></li> <li><label>ZPLUS: <span id="zplus"></span></label></li> <button onclick="submitData();">Submit changes</button> </ol> </div> 

Answer 1

1. 最好将代码分成每个处理任务的函数。
2. 你正在使用jQuery，所以使用jQuery。
3. 将data对象的索引存储到每个tr中，这样您就可以使用同一索引的endpointsData中的对象更新模板div。 data-index将是完美的。
4. 将模板div放在HTML中的tr中，而不是在JS中进行。

这里是：

function createRow(object, index) {                                     // this function takes an object and its index from the data array and then creates a tr for it
    return $("<tr>").append(                                            // create a tr
        $.map(object, function(value) {                                 // and fill it
            return $("<td>").text(value);                               // with each value from the object mapped into a td
        })
    ).addClass("header")                                                // then add the class header to it
     .data("index", index);                                             // and store the index of the object as data-index so it can be used to fill the template when the tr is clicked
}

function populateTable(data) {                                          // this function takes an array of data object and fill the table with trs
    $("#tableBody").append(                                             // fill the table
        $.map(data, createRow)                                          // with each object from the array mapped into a tr using createRow
    );
}

function updateTemplate(object) {                                       // this function takes an object and fill the template with its values
    $.each(["epid", "clslist", "type", "zplus"], function(index, key) { // for each key in the array ...
        $('#' + key).text(object[key]);                                 // fill the template with values from the object
    });
}

var $templateRow = $("#templateRow");                                   // template row that contain the template div
$("#tableBody").on("click", "tr.header", function() {                   // when a .header row is clicked (using event delegation as the rows are still not generated yet)
    updateTemplate(endpointsData[$(this).data("index")]);               // get the object from endpointsData using the index of the current tr (stored eariler as data-index) and then pass it to updateTemplate so the template is updated with newer values
    $templateRow.toggle();                                              // toggle the visibility of the template row (hide it if visible, show it otherwise)
    $templateRow.insertAfter(this);                                     // put the template row right after the currently clicked row
});

populateTable(data);                                                    // populate the table

工作代码片段：

 var data = [{"nodeid":1,"vendor":"0x0345","product_id":"0x0201","product_type":"0x0008","home_id":"0xD087E344","secure":"1"},{"nodeid":2,"vendor":"0x0285","product_id":"0x0777","product_type":"0x0001","home_id":"0xD087D213","secure":"0"},{"nodeid":3,"vendor":"0x1145","product_id":"0x7899","product_type":"0x0851","home_id":"0xD034T13","secure":"0"},{"nodeid":4,"vendor":"0x8992","product_id":"0x1236","product_type":"0x8101","home_id":"0xD0682F13","secure":"1"}]; var endpointsData = [{"epid":1,"clslist":"5f","type":"0x02,0x01","zplus":"0x00,0x00,0x00,0x0000,0x0000"},{"epid":2,"clslist":"20,5e,72,86,59,73,5a,8f,98,7a,80,71,85,5c,70,30,31,84","type":"0x07,0x01","zplus":"0x01,0x00,0x06,0x0c07,0x0c07"},{"epid":3,"clslist":"20,5e,72,86,59,73,5a,8f,98,7a,80,71,85,5c,70,30,31,84","type":"0x07,0x01","zplus":"0x01,0x00,0x06,0x0d01,0x0d01"},{"epid":4,"clslist":"134,547,843,122","type":"2x07,0x01","zplus":"3x44,0x0d01,0x1ed01"}]; function createRow(object, index) { return $("<tr>").append( $.map(object, function(value) { return $("<td>").text(value); }) ).addClass("header") .data("index", index); } function populateTable(data) { $("#tableBody").append( $.map(data, createRow) ); } function updateTemplate(object) { $.each(["epid", "clslist", "type", "zplus"], function(index, key) { $('#' + key).text(object[key]); }); } var $templateRow = $("#templateRow"); $("#tableBody").on("click", "tr.header", function() { updateTemplate(endpointsData[$(this).data("index")]); $templateRow.toggle(); $templateRow.insertAfter(this); }); populateTable(data); 

 th { white-space: nowrap; color: #D5DDE5; background: #1b1e24; border-bottom: 4px solid #9ea7af; border-right: 1px solid #343a45; font-size: 23px; font-weight: 100; padding: 24px; text-align: left; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); vertical-align: middle; } tr { border-top: 1px solid #C1C3D1; border-bottom-: 1px solid #C1C3D1; color: #666B85; font-size: 16px; font-weight: normal; text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1); cursor: pointer; } /*grey row*/ tr:hover td { background: #4E5066; color: #FFFFFF; border-top: 1px solid #22262e; } tr:nth-child(odd) td { background: #EBEBEB; } tr:nth-child(odd):hover td { background: #4E5066; } td { text-align: center; background: #FFFFFF; vertical-align: middle; font-weight: 300; font-size: 18px; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1); border-right: 1px hidden #C1C3D1; } tr:hover a { text-decoration: none; color: white; } tr a { text-decoration: none; color: black; } tr.header { display: table-row; } .rounded-list label { position: relative; display: block; padding: .4em .4em .4em 2em; *padding: .4em; margin: .5em 0; background: #ddd; color: #444; text-decoration: none; border-radius: .3em; } button { position: relative; display: block; margin: .5em 0; background: #87ceeb; color: #444; text-decoration: none; border-radius: .5em; } .rounded-list label:hover, button { background: #eee; } .rounded-list label:before { content: counter(li); counter-increment: li; position: absolute; left: -1.3em; top: 50%; margin-top: -1.3em; background: #87ceeb; height: 2em; width: 2em; line-height: 2em; border: .3em solid #fff; text-align: center; font-weight: bold; border-radius: 2em; transition: all .3s ease-out; } #name, #loc:focus { outline: 0px solid transparent; } #tableheader { cursor: default; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="tableData"> <thead> <tr id="tableheader"> <th>NODE ID</th> <th>VENDOR</th> <th>PRODUCT ID</th> <th>PRODUCT TYPE</th> <th>HOME ID</th> <th>SECURE</th> </tr> </thead> <tbody id="tableBody"> <tr id="templateRow" style='display: none;'> <td colspan='6'> <div id="divTemplate"> <ol class="rounded-list"> <li><label>ID: <input id="roomName"/></label></li> <li><label>LOC. NAME: <input id="loc"/></label></li> <li><label>EPID: <span id="epid"></span></label></li> <li><label>CLSLIST: <span id="clslist"></span></label></li> <li><label>TYPE: <span id="type"></span></label></li> <li><label>ZPLUS: <span id="zplus"></span></label></li> <button onclick="submitData();">Submit changes</button> </ol> </div> </td> </tr> </tbody> <table>