用对象数组填充表
Posted
技术标签:
【中文标题】用对象数组填充表【英文标题】：Populate table with an array of objects 【发布时间】：2019-01-15 23:25:17 【问题描述】：我有一个表，我需要用对象数组中的数据填充它。 该表的外观和工作方式类似于 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>【问题讨论】：
请在问题中包含您遇到问题的相关代码。我们不应该仅仅为了检查您最初的问题而离开现场。演示很棒，但仅作为对问题实际内容的支持 好吧，当你点击一行时，你只会显示$contentCell元素，你不会用点击的行的值来更新它。
@ibrahimmahrir 简而言之，这就是我的问题。我是否需要为每个对象创建不同的 div 并将其附加到特定行？
@mecnism 抱歉回复晚了。我已经发布了答案。
【参考方案1】：
-
最好将您的代码分成每个处理一个任务的函数。
您使用的是 jQuery，所以使用 jQuery。
将
data 对象的索引存储到每个tr 中，这样您就可以使用同一索引的endpointsData 中的对象更新模板div。 data-index 将是完美的。
将模板 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
工作代码sn-pt：
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>【讨论】：
我今天学到了新东西！谢谢你，小伙伴！很清楚很精确！以上是关于用对象数组填充表的主要内容，如果未能解决你的问题，请参考以下文章