将对象数组作为元素添加到现有 table td

Question

我有一个现有的 table。我有意将 td 单元格显示为块。 :) 我的目标是通过创建具有特定 class 的跨度在每个 td 中添加标签，然后将它们添加到 table 单元格。我正在使用带有标签数据的对象数组，一个 'icon' 和一个 'name'.

我在将图标单独应用到 td 时遇到问题。他们都在每个单元格上组合在一起。

我正在努力解决的几个问题：

将每个对象（一个图标和一个标签）添加到每个单元格
创建元素时，将图标 class 添加到图标范围，将标签 class 添加到标签范围。
按照对象中显示的顺序适当地应用它们

我已经尝试了很多不同的东西（见代码注释）和很多关于 SO 的好帖子，但这个功能似乎让我最接近我的目标。非常感谢任何帮助。

let items = [{
    id: "",
    name: "snail"
  },
  {
    id: "",
    name: "ant"
  },
  {
    id: "",
    name: "beetle"
  },
  {
    id: "",
    name: "honeybee"
  },
  {
    id: "",
    name: "spider"
  }
];

function createLabel(obj) {
  // let loc = document.getElementsByTagName("#profiles td");
  let loc = document.querySelectorAll("#profiles td");

  if (typeof obj !== "undefined" && obj !== null) {
    // loop through td's
    for (let i = 0; i < loc.length; i++) {
      // apply object data
      obj.forEach((item) => {
        Object.values(item).forEach((text) => {
          // loc.prepend(span);

          // I also tried my for loop here with similar weird results

          let span = document.createElement("span");
          let textNode = document.createTextNode(text);
          // 'id' should get .icon
          // 'name' should get .label
          span.className = 'icon';
          span.append(textNode);
          loc[i].prepend(span);
        });
      });
    }
  }
}
createLabel(items);

<table id="profiles">
  <tr>
    <td>Snail Stuff</td>
    <td>Ant Stuff</td>
    <td>Beetle Stuff</td>
    <td>Honeybee Stuff</td>
    <td>Spider Stuff</td>
  </tr>
</table>

Answer 1

您正在使用 document.querySelectorAll。您可以简单地使用 document.querySelector 获取 table 和运行一个 for of 循环将元素附加到 table

let items = [
  { id: "", name: "snail", text: "Snail Stuff" },
  { id: "", name: "ant", text: "Ant Stuff" },
  { id: "", name: "beetle", text: "Beetle Stuff" },
  { id: "", name: "honeybee", text: "Honeybee Stuff" },
  { id: "", name: "spider", text: "Spider Stuff" }
];

function createLabel(obj) {
  const loc = document.querySelector("#profileRow");
  const elements = [];

  for (const item of obj) {
    const el = document.createElement("td");
    el.innerHTML = `<span class='icon'>${item.id}</span> <span class='label'>${item.name}</span> ${item.text}`;
    elements.push(el);
  }

  loc.append(...elements);
}
createLabel(items);

td {
  display: block;
  border: 1px solid #ccc;
}
span {
  display: inline-block;
}
.icon {
  background: yellow;
  width: 3rem;
  text-align: center;
}
.label {
  font-weight: bold;
  width: 6rem;
}


.pie {
  margin-top: 4rem;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <table id="profiles">
      <tr id="profileRow"></tr>
    </table>
  </body>
</html>

Answer 2

我认为问题在于您在元素上循环了两次。有了第一个就够了

这是我的选择：

let items = [{
    id: "",
    name: "snail"
  },
  {
    id: "",
    name: "ant"
  },
  {
    id: "",
    name: "beetle"
  },
  {
    id: "",
    name: "honeybee"
  },
  {
    id: "",
    name: "spider"
  },
];

//created a function so that we don't repeat the span creation
function createSpan(text, className) {
  let span = document.createElement('span')
  span.className = className;
  let textNode = document.createTextNode(text)
  span.append(textNode)
  return span
}

function createLabel(obj) {
  // let loc = document.getElementsByTagName("td");
  let loc = document.querySelectorAll("#profiles td");

  if (typeof obj !== "undefined" && obj !== null) {
    // loop through td's
    for (let i = 0; i < loc.length; i++) {
      // apply object data
      // loc.prependspan;
      //destructure the item so that we get its properties, it's the same as doing const id = items[i].id and const name=items[i].name but all in one line!
      const {
        id,
        name
      } = items[i]
      const iconSpan = createSpan(id, 'icon')
      // 'id' should get .icon
      // 'name' should get .label

      let labelSpan = createSpan(name, 'label')
      loc[i].prepend(iconSpan, labelSpan);
      // loc[i].insertAdjacentHTML('afterbegin', span);
      ;
    }
  }
}
createLabel(items);

<table id="profiles">
  <tr>
    <td>Snail Stuff</td>
    <td>Ant Stuff</td>
    <td>Beetle Stuff</td>
    <td>Honeybee Stuff</td>
    <td>Spider Stuff</td>
  </tr>
</table>

将对象数组作为元素添加到现有 table td

Add array of objects as elements to existing table td

html

javascript

arrays

object