javascript - 将带有类的元素添加到模板循环(vanilla JS)

Question

var tableOne = [
  {
    NameOne: 'NameA',
    ValueX: "60%",
    ValueY: 6,
  },
  {
    NameOne: 'NameB',
    ValueX: "30%",
    ValueY: 3,
  },
  {
    NameOne: 'NameC',
    ValueX: "10%",
    ValueY: 1,
  },
  {
    NameOne: 'Total',
    ValueX: "100%",
    ValueY: "10",
  }
];

var tableTwo = [
  {
    NameTwo: 'NameD',
    ValueX: "40%",
    ValueY: 8,
  },
  {
    NameTwo: 'NameE',
    ValueX: "20%",
    ValueY: 4,
  },
    {
    NameTwo: 'NameF',
    ValueX: "10%",
    ValueY: 2,
  },
    {
    NameTwo: 'NameG',
    ValueX: "30%",
    ValueY: 6,
  },
  {
    NameTwo: 'Total',
    Second: "100%",
    Third: "20",
  }
];

var selectorOne = "TblOneId";
var selectorTwo = "TblTwoId";

jsonToTable(tableOne, selectorOne);
jsonToTable(tableTwo, selectorTwo);

function jsonToTable(json, selector) {
  //begin function

  //array to hold the html for the table
  var html = [];

  //add the opening table and tablebody tags
  html.push("<table class='tbl-container'>\n<tbody>");

  //begin adding the table headers
  html.push("<tr class='tbl-headers'>");

  //loop through the property names of the first object
  for (var propertyNames in json[0]) {
    //begin for in loop

    html.push("<th>" + propertyNames + "</td>");
  } //end for in loop

  html.push("</tr>");

  //loop through the array of objects
  json.forEach(function(item) {
    //begin forEach

    //add the opening table row tag
    html.push("<tr class='tbl-rows'>");

    //loop though each of the objects properties
    for (var key in item) {
      //begin for in loop

      //append the table data containing the objects property value
      html.push("<td>" + item[key] + "</td>");
    } //end for in loop

    //add the closing table row tag
    html.push("</tr>");
  }); //end forEach

  //add the closing table and table body tags
  html.push("<table>\n</tbody>");

  //testing display of results
  document.getElementById(selector).innerHTML = html.join("");
} //end function

* {box-sizing: border-box;}

/* SVG */

.svg-symbol {
  display: none;
}

.svg-icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    margin: 0 5px;
}



.tbl-container {
  width: 100%;
  margin-bottom: 0.5rem;
  border-spacing: .75rem;
}
.tbl-headers {
}

th {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-weight: 400;
  text-align: right;
  color: #999;
  padding: .625rem;
  white-space: nowrap;
}

td {
  text-align: right;
  vertical-align: middle;
  color: #666;
  background: white;
  white-space: nowrap;
}
.tbl-container > tbody > tr > th:first-child,
.tbl-container > tbody > tr > td:first-child {
  text-align: left;
}
.tbl-container > tbody > tr:last-child > td:first-child {
  border-bottom-left-radius: var(--BorderRadius);
}
.tbl-container > tbody > tr:last-child > td:last-child {
  border-bottom-right-radius: var(--BorderRadius);
}
.tbl-container > tbody > tr:last-child > td {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--AlphaDark60);
}

/* */
body {
  background:#eaeaea;
}
.container {
  margin: 4rem 25rem;
  background:white;
  border-radius:5px;
  
}

/* nytt */

.tbl-rows > td:first-child {
  display: flex;
  align-items:center;
  border-radius: 18px;
  background-color: #e1e1ff;
  width:100%;
  min-width:36px;
  height:36px;
}
.tbl-container > tbody > tr:last-child > td {
  background-color: white;
  margin-left:2rem;
  padding-top:.625rem;
}

.svg-icon {
  margin-left:5px;
}

<div id="TblOneId"></div>
<br>
<div id="TblTwoId"></div>

我卡住了。我想添加两个 div 元素，它们也应该有各自的类名。查看当前代码的 fiddle 。我希望一行的输出看起来像:

<tr class="tbl-rows">
  <td>
    <div class="first-class">
      <div class="second-class">10</div>
    <div>
  </td>
  <td>Second 1</td>
  <td>Third 1</td>
</tr>

需要添加类为“first-class”和“second-class”的两个div's。 我也不想在最后一个 tr 处有两个 div's。

当前代码:https://jsfiddle.net/0f59nctq/

在 jsfiddle 中，我用蓝色突出显示了我想要 div 的 td。 第一个 tr 中的第一个 th 和最后一个 tr 中的第一个 td 不应该有 div。

提前致谢， 弗兰克。

Answer 1

有问题吗？

• 要检测第一项，您可以在 for-in 循环之前将变量(假设是 first)设置为 true，然后在循环内检查它, 插入元素并重置它(如果已设置)，因此仅适用于第一个元素。
• 要检测最后一行，您可以使用常规的 for 循环，以便检查当前行是否为最后一行(索引 == length - 1)，如果是，则不设置上述变量。

而且，当您可以使用实际元素时，为什么要从 HTML 字符串拼接元素？

function addEl(parent, nodeName, className) {
  var element = document.createElement(nodeName);
  if (className) element.className = className;
  if (parent) parent.appendChild(element);
  return element;
}
function addText(parent, text) {
  parent.appendChild(document.createTextNode(text));
}
function jsonToTable(json, selector) {
  var table = addEl(null, "table", "tbl-container");
  var tbody = addEl(table, "tbody");
  var thr = addEl(tbody, "tr", "tbl-headers");
  
  //loop through the property names of the first object
  for (var propertyName in json[0]) {
    addText(addEl(thr, "th"), propertyName);
  }
  
  //loop through the array of objects
  for (var ind = 0; ind < json.length; ind++) {
    var item = json[ind];
    var tr = addEl(tbody, "tr", "tbl-rows");
    //loop though each of the objects properties
    var first = ind != json.length - 1; // no first item for last row
    for (var key in item) {
      var el = addEl(tr, "td");
      if (first) { // <---- point of interest
        el = addEl(el, "div", "first-class");
        el = addEl(el, "div", "second-class");
        first = false;
      }
      //append the table data containing the objects property value
      addText(el, "" + item[key]);
    }
  }
  
  var target = document.getElementById(selector);
  target.innerHTML = "";
  target.appendChild(table);
} //end function

var tableOne = [
  {
    NameOne: 'NameA',
    ValueX: "60%",
    ValueY: 6,
  },
  {
    NameOne: 'NameB',
    ValueX: "30%",
    ValueY: 3,
  },
  {
    NameOne: 'NameC',
    ValueX: "10%",
    ValueY: 1,
  },
  {
    NameOne: 'Total',
    ValueX: "100%",
    ValueY: "10",
  }
];

var tableTwo = [
  {
    NameTwo: 'NameD',
    ValueX: "40%",
    ValueY: 8,
  },
  {
    NameTwo: 'NameE',
    ValueX: "20%",
    ValueY: 4,
  },
    {
    NameTwo: 'NameF',
    ValueX: "10%",
    ValueY: 2,
  },
    {
    NameTwo: 'NameG',
    ValueX: "30%",
    ValueY: 6,
  },
  {
    NameTwo: 'Total',
    Second: "100%",
    Third: "20",
  }
];

var selectorOne = "TblOneId";
var selectorTwo = "TblTwoId";

jsonToTable(tableOne, selectorOne);
jsonToTable(tableTwo, selectorTwo);

* {box-sizing: border-box;}

/* SVG */

.svg-symbol {
  display: none;
}

.svg-icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    margin: 0 5px;
}



.tbl-container {
  width: 100%;
  margin-bottom: 0.5rem;
  border-spacing: .75rem;
}
.tbl-headers {
}

th {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-weight: 400;
  text-align: right;
  color: #999;
  padding: .625rem;
  white-space: nowrap;
}

td {
  text-align: right;
  vertical-align: middle;
  color: #666;
  background: white;
  white-space: nowrap;
}
.tbl-container > tbody > tr > th:first-child,
.tbl-container > tbody > tr > td:first-child {
  text-align: left;
}
.tbl-container > tbody > tr:last-child > td:first-child {
  border-bottom-left-radius: var(--BorderRadius);
}
.tbl-container > tbody > tr:last-child > td:last-child {
  border-bottom-right-radius: var(--BorderRadius);
}
.tbl-container > tbody > tr:last-child > td {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--AlphaDark60);
}

/* */
body {
  background:#eaeaea;
}
.container {
  margin: 4rem 25rem;
  background:white;
  border-radius:5px;
  
}

/* nytt */

.tbl-rows > td:first-child {
  display: flex;
  align-items:center;
  border-radius: 18px;
  background-color: #e1e1ff;
  width:100%;
  min-width:36px;
  height:36px;
}
.tbl-container > tbody > tr:last-child > td {
  background-color: white;
  margin-left:2rem;
  padding-top:.625rem;
}

.svg-icon {
  margin-left:5px;
}

<div id="TblOneId"></div>
<br>
<div id="TblTwoId"></div>