Добавить массив объектов в качестве элементов в существующую таблицу td
У меня есть существующая таблица. Я намеренно отображаю ячейки td как блоки. :) Моя цель — добавить метки внутри каждого из td, создав интервалы с определенным классом, а затем добавить их в ячейку таблицы. Я использую массив объектов с данными метки, «значком» и «именем».
У меня возникли проблемы с применением значков по отдельности к td. Все они сгруппированы вместе в каждой ячейке.
Несколько проблем, которые я пытаюсь решить:
- Добавьте каждый объект (один значок и одну метку) в каждую ячейку
- При создании элементов добавьте класс значков в диапазон значков и класс меток в диапазон меток.
- Примените их соответствующим образом в порядке, указанном в объекте
Я пробовал кучу разных вещей (см. комментарии к коду) и много хороших сообщений здесь, на 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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы использовали document.querySelectorAll. Вы можете просто использовать document.querySelector, чтобы получить таблицу и запустить цикл for of, чтобы добавить элемент в таблицу.
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>@LeeTaylorДа готово
Хорошо, я понял. Благодарю вас! Я по ошибке пытался перебрать ячейки таблицы, затем перебрать объект и вставить данные. Классический случай переосмысления проблемы. Мне нравится использовать литералы шаблонов, чтобы сделать его еще чище.
@Inder Мне нравится этот ответ, но как он будет работать с моим html? В этих ячейках будут существующие данные, и каждая «строка» получит одинаковые метки. Используя этот метод, ДОБАВЛЯЕТ td, который становится еще одним набором «строк», которых я хочу избежать. Я хочу просто добавить два промежутка внутри перед существующими данными.
@carbonspace есть только одна строка, внутри которой добавляется больше ячеек. Я использую теги td, а не tr. Я добавляю ячейки в одну строку.
Вы имеете в виду, как вы будете использовать теги th?
Я понимаю, что ваш код просто отличается от того, что я просил, и вы изменили мой html на что-то другое. Ваше решение не добавляет диапазон ВНУТРИ td, оно добавляет еще один td. Я получил for..of работы здесь, но мне пришлось добавить var для увеличения. codepen.io/carbonspace/pen/MWQKWYB Кроме того, использование innerHTML сотрет весь существующий контент, чего я определенно не хочу делать.
@carbonspace В моем коде html добавляется через javascript. Если вы хотите добавить больше тегов td, вы можете просто вызвать функцию и передать массив. html, который у вас был изначально, остается прежним, только он добавляется через js. Вам решать, что вы хотите реализовать в своем приложении.
Я думаю, проблема в том, что вы дважды перебираете элементы. С первым для этого должно быть достаточно
Это мой ход:
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>Кажется, это не так, как хотел ОП.
Ницца. Я хотел попытаться обернуть все это в одну функцию, но этот ответ работает [codepen.io/carbonspace/pen/NWyxWqa], и это неплохой способ сделать это. Интересный способ получить данные об объекте и хорошее решение. Благодарю вас!
Лучше объяснить, что ваш код делает по-другому, где ОП пошла не так и т. д., а не просто дамп кода.