我有一个表，需要用对象数组中的数据填充。 该表的外观和工作方式类似于this。
问题是，如果我单击任何行，它将显示来自endpointsData数组的最后一个对象的数据（{epid: 4...等）。我想要的是在正确的位置放置正确的数据。
例如，包含该对象数据的第一行：
{
"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>
答案 0 :(得分：0)
data对象的索引存储到每个tr中，这样您就可以使用同一索引的endpointsData中的对象来更新模板div。 data-index将是完美的。这里是：
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>