javascript-使用html标记在循环中显示数据

我有一个对象数组。每个对象包含很少的参数。我要做的是运行数组，从每个单元格中获取数据，并将其显示在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（）{
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；
变量通知={
typeNotification:typeNotification，
电邮:电邮,，
delayLimit:delayLimit，
timeStart:timeStart，
timeEnd:timeEnd，
valueNumber:valueNumber，
电话号码：电话号码
};
var notificationList=[]；
通知列表。推送（通知）；
控制台日志（通知列表）；
var notificationListLength=notificationList.length；
对于（变量i=0；i

在循环中，它给了我标签错误

如您所见，当用户按下

AddButton

按钮时，它获取所有数据并将其还原到object中，然后我将该对象添加到数组中，然后在数组上运行，从数组的每个单元格获取数据，并将其显示在网格中。 就像我说的，它给了我标签循环中的错误

知道怎么解决吗？

var notificationListLength=notificationList.length；
   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 ; 

var html_data=''；
对于（变量i=0；i

var notificationListLength=notificationList.length；
var html_data=''；
对于（变量i=0；i

您需要建立所需html/标记的输出，然后将其添加到页面上的目标元素中，如下所示：

<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>

添加
常数
target=document.querySelector（“#target”），
通知列表=[{
typeNotification:“typeNotification”，
电子邮件：“电子邮件”，
delayLimit:“delayLimit”，
timeStart:“timeStart”，
timeEnd:“timeEnd”，
valueNumber:“valueNumber”，
电话号码：“电话号码”
}];
让输出=“”；
函数addButton（）{
notificationList.forEach（项=>{
输出=`
${item.email}-1/2
${item.typeNotification}-2/2
${item.timeStart}-1/3
${item.timeEnd}-2/3
${item.delayLimit}-3/3
`;
target.innerHTML+=输出
});
}

如您所见，您可以在将输出添加到目标之前调整输出

为了节省时间，我在notificationList字符串中创建了所有属性，但在您的示例中，它们将由页面上的其他元素组成

以下是一个工作示例：

--编辑--

这是同样的事情，但这次使用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>

添加
常数
targetTable=document.querySelector（'table'），
headerRow=targetTable.createTHead（）.insertRow（），
tableBody=targetTable.createTBody（），
通知列表=[]；
headerRow.insertCell（）.textContent='通知类型'；
headerRow.insertCell（）.textContent='Email'；
headerRow.insertCell（）.textContent='延迟限制'；
函数addButton（）{
while（tableBody.firstChild）{
tableBody.removeChild（tableBody.firstChild）；
}
notificationList.push({
typeNotification:`Type${Math.floor（Math.random（）*Math.floor（10））}`，
电子邮件：`Name${Math.floor（Math.random（）*Math.floor（1000