Question

我有一个对象数组。每个对象包含几个参数。我想做的是在数组上运行并从每个单元中获取数据，并将其显示在表/网格上。

示例代码

<style name="Theme.AppCompat.Translucent" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:background">#31f7f4f4</item> 
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:colorBackgroundCacheHint">@null</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowAnimationStyle">@android:style/Animation</item>

</style>

在循环中，它给我标记带来了错误。

如您所见，当用户按下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> } }时，它将获取所有数据并将其还原到对象中，然后将对象添加到Array中，然后在该数组上运行并从其中的每个单元获取该数组的数据，我想在网格中显示它。就像我说的那样，使用代码在循环内给了我错误。

任何想法我该如何解决？

Answer 1

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

<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

希望有帮助

Answer 2

BookmakerInfo

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

2 个答案: