将带有类的元素添加到模板循环（香草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元素，它们也应该具有各自的类名。 有关当前代码，请参见小提琴。 我希望一行的输出看起来像：

<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 。 我也不想在最后一个tr中有两个div 。

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

在jsfiddle中，我突出显示了我想让div为蓝色的td 。 在第一TR的第一届 ，在过去TR不应该第一个TD有申报单。

预先感谢，弗兰克。

Answer 1

有收获吗？

• 要检测第一个项目，可以在for-in循环之前将变量（假设为first ）设置为true ，然后在循环中检查它，插入项目并重置（如果已设置），因此仅适用于第一个项目。项目。
• 要检测最后一行，您可以使用常规的for循环，以便可以检查当前行是否为最后一行（索引==长度-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>