javascript -使用html标记在循环中显示数据
javascript -使用html标记在循环中显示数据
提问于 2018-07-07 18:22:13
我有一个对象数组。每个对象包含的参数很少。我试图做的是遍历数组，从每个单元格中获取数据，并将其显示在tabel/grid上。
示例代码
function addButton(){
var phoneNumber = document.getElementById("phoneNumber").value;
var email = document.getElementById("email").value;
var typeNotification = document.getElementById("typeNotification").value;
var valueNumber = document.getElementById("valueNumber").value;
var delayLimit = document.getElementById("delayLimit").value;
var timeStart = document.getElementById("timeStart").value;
var timeEnd = document.getElementById("timeEnd").value;
var notify = {
typeNotification : typeNotification,
email : email,
delayLimit : delayLimit,
timeStart : timeStart,
timeEnd : timeEnd,
valueNumber : valueNumber,
phoneNumber : phoneNumber
};
var notificationList = [];
notificationList.push(notify);
console.log(notificationList);
var notificationListLength = notificationList.length;
for(var i = 0;i < notificationListLength;i++){
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
}
}在循环中，它给了我错误的标签。
正如您所看到的，当用户按AddButton时，它将获取所有数据并将其恢复到对象中，然后我将对象添加到数组中，然后在数组上运行，并从数组的每个单元中获取数据，然后我希望将其显示在网格中。就像我说的，它给了我在循环中使用标签的错误。
你知道我该怎么解决这个问题吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-07 19:01:17
您需要构建所需的html/tag的输出，然后将其添加到页面上的目标元素中，如下所示：
<div id="target"></div>
<button onclick="addButton()">Add</button>
<script>
const
target = document.querySelector('#target'),
notificationList = [{
typeNotification: 'typeNotification',
email: 'email',
delayLimit: 'delayLimit',
timeStart: 'timeStart',
timeEnd: 'timeEnd',
valueNumber: 'valueNumber',
phoneNumber: 'phoneNumber'
}];
let output = '';
function addButton() {
notificationList.forEach(item => {
output = `
<div class="container">
<div class="row">
<div class="col">
${item.email} - 1 of 2
</div>
<div class="col">
${item.typeNotification} - 2 of 2
</div>
</div>
<div class="row">
<div class="col">
${item.timeStart} - 1 of 3
</div>
<div class="col">
${item.timeEnd} - 2 of 3
</div>
<div class="col">
${item.delayLimit} - 3 of 3
</div>
</div>
</div>
`;
target.innerHTML += output
});
}
</script>如您所见，您可以在将输出添加到目标之前调整输出。
为了节省时间，我在notificationList字符串中设置了所有属性，但在您的示例中，它们将由页面上的其他元素组成。
下面是一个有效的示例：https://jsfiddle.net/14o8n30u/6/
-编辑--
下面是相同的事情，但这次使用javascript内置表函数更新了一个表：
<button onclick="addButton()">Add</button>
<table></table>
<script>
const
targetTable = document.querySelector('table'),
headerRow = targetTable.createTHead().insertRow(),
tableBody = targetTable.createTBody(),
notificationList = [];
headerRow.insertCell().textContent = 'Notification Type';
headerRow.insertCell().textContent = 'Email';
headerRow.insertCell().textContent = 'Delay Limit';
function addButton() {
while (tableBody.firstChild) {
tableBody.removeChild(tableBody.firstChild);
}
notificationList.push({
typeNotification: `Type${Math.floor(Math.random() * Math.floor(10))}`,
email: `Name${Math.floor(Math.random() * Math.floor(1000))}@test.com`,
delayLimit: `${Math.floor(Math.random() * Math.floor(100))} seconds`,
});
notificationList.forEach(item => {
const newRow = tableBody.insertRow(0);
newRow.insertCell().textContent = item.typeNotification;
newRow.insertCell().textContent = item.email;
newRow.insertCell().textContent = item.delayLimit;
});
}
</script>在我的示例中，我使用随机数据进行演示，但在您的示例中，数据将从页面上的元素构建。
请注意，您必须将notificationList放在addButton之外，否则每次单击该按钮时，它都会被重置为一个空数组。
页面加载时，填充表头和表体。
然后，当点击addButton时，表体被清空，然后在notificationList中添加一个新的通知。
然后，在循环遍历通知的forEach中，所有通知都会在表的顶部添加自己的行(即，每次单击addButton时都会重新填充整个表体)。
您可能不需要填充您自己的表头，但是如果您这样做了，您可以在这个示例中看到如何填充。
这里它可以工作了(由于某种原因，我不能让它在jsfiddle上工作)：https://codepen.io/leonsegal/pen/oyKBQb
希望这能有所帮助
Stack Overflow用户
发布于 2018-07-07 18:42:12
var notificationListLength = notificationList.length;
var html_data = '';
for(var i = 0;i < notificationListLength;i++)
{
html_data += '<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>';
}
/* Make a div(id="html_div") when you need display data */
document.getElementById("html_div").innerHTML = html_data ; 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51222214
复制相关文章
相似问题