javascript - 使用 html 标签循环显示数据

Question

我有一个对象数组。每个对象都包含很少的参数。我想做的是运行数组并从每个单元格获取数据并将其呈现在表格/网格上。

示例代码

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时，它会获取所有数据并将其恢复到对象中，然后我将对象添加到数组中，然后在数组上运行并从中获取数组的每个单元格都有数据，我想在网格中显示它。 就像我说的，它在带有标签的循环内给了我错误。

知道如何解决吗？

Answer 1

您需要构建所需的 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>

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

我已经在 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

希望有帮助