javascript - 用对象数组填充表

Question

我有一个表，我需要用对象数组中的数据填充它。该表的外观和工作方式类似于 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>

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>