javascript - 如何阻止我的模式添加新行？

Question

表格

<table id="fisicHostsTable">
    <tr class="row">
        <th class="tableHeader">Nombre</th>
        <th class="tableHeader">IP</th>
        <th class="tableHeaders">Sistema Operativo</th>
        <th class="tableHeaders">Notas</th>
    </tr>

    <th:block th:each="fh : ${datacenterFisicHosts}">
        <div>
            <tr class="row">
                <td id="fisicHostName" th:text="${fh.name}"></td>
                <td id="fisicHostIp" th:text="${fh.ip}"></td>
                <td id="fisicHostOS" th:text="${fh.operatingSystem}"></td>
                <td id="fisicHostNotes" th:text="${fh.notes}"></td>
                <td><button class="credentialsButton" th:attr="data-fisic-host-id=${fh.id}">CREDENCIALES</button></td>
            </tr>
        </div>
    </th:block>
</table>

模态:

<!-- Modal -->
<div class="modal fade" id="credentialsModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-title">Credenciales</h5>
            </div>
            <div class="modal-body">
                <table id="credentialsTable">
                    <tr class="row">
                        <th>Usuario</th>
                        <th>Clave</th>
                        <th>Notas</th>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

JS

$(".credentialsButton").click(function(){
    var fisicHostId = $(this).data('fisic-host-id');
    $.get( "/fisicHost/" + fisicHostId + "/credentials", data => {
        console.log(data);

        for (i = 0; i < data.length; ++i) {
            var fisicHost = data[i];

            var new_row = document.createElement('tr');
            new_row.className = "row fisichost";

            var userCol = document.createElement('td');
            userCol.textContent = fisicHost["user"];
            new_row.append(userCol);

            var passwordCol = document.createElement('td');
            passwordCol.textContent = fisicHost["password"];
            new_row.append(passwordCol);

            var notesCol = document.createElement('td');
            notesCol.textContent = fisicHost["notes"];
            new_row.append(notesCol);

            $("#credentialsTable").append(new_row);
        }

        $('#credentialsModal').modal('show');

        $('#credentialsTable').remove(new_row);

    }).fail(function(xhr, status, error) {
        console.error(error);
        alert('No se pudieron cargar las credenciales.');
    });
});

数据数组看起来总是这样:

我遇到的问题是，每次单击按钮时，凭据都会重复。我想给他们看一次，不是在一个循环中，但找不到阻止他们循环的方法!

我在模式显示后添加了 remove(new_row) 但它正在删除所有内容!

编辑:

这是模式:

我只想显示前两行，因为我需要显示两个凭据，但如您所见，每次我打开模态时，数据都会自行重复...我想停止重复!

Answer 1

我会说，就在循环 for(i= etc, put:

$('#credentialsTable').empty(); 

因此在添加之前删除所有行。

因此将这段代码放在循环之前。