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），但是它删除了所有内容！

编辑：

这是模式：

我只想显示前两行，因为我需要显示两个凭证，但是正如您所看到的，每次我打开模态时，数据本身都是重复的……我想停止重复！ / p>

Answer 1

我会说，就在循环for(i=等之前，放置：

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

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

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

Answer 2

我认为您正在检索凭据并将其添加到模态中的表中。问题在于，一旦关闭并打开模型，以前的数据仍然存在，并且要添加新的数据。为了避免这种情况，您需要侦听模式关闭事件，一旦模式关闭，就删除添加的行。

类似这样的东西：

$('#credentialsModal').bind('hide', function () {
   $('#credentialsModal tr.fisichost').remove();
});

Answer 3

您可以使用jquery方法.one代替.on来仅在第一次发生事件时运行函数。

$("button").one("click", function() {
  console.log("ran only the once");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click me</button>

如何阻止我的模式附加新行？

3 个答案: