javascript - ReplaceWith() 添加新行但不删除旧行？

Question

我试图在 jQuery 中使用 replaceWith() 来替换我表中的一行，但它并没有替换。添加了新行，旧行仍然存在(直到我刷新页面)。我一定是遗漏了一些东西，因为从文档来看这应该可以工作......

表格 HTML:

<div class="table-responsive-md table-hover">
    <table class="table table-striped table-sm" id="setup-table">
        <thead>
            <tr>
                <th scope="col">Report</th>
                <!-- <th scope="col">Category</th> -->
                <th scope="col">Interval</th>
                <th scope="col">Timing</th>
                <th scope="col">Enabled</th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            <div class="row text-center" style="display:flex; flex-wrap:wrap;">
                <% user.reports.forEach(function(report) { %>
                    <tr>
                        <th scope="row" id="table-report"><%= report.report %></th>
                        <!-- <td id="table-category"><%= report.category %></td> -->
                        <td id="table-interval"><%= report.interval %></td>
                        <td id="table-timing">@<%= report.timing %></td>
                        <td id="table-enabled">
                            <div class="custom-control custom-switch">
                                <!-- <input type="checkbox" class="custom-control-input on-disabled-switch" disabled id="revenue_switch">
                                <label class="custom-control-label" for="revenue_switch"></label> -->

                                <% if (report.enabled) { %>
                                    <input class="form-check-input" type="checkbox" value="" checked disabled id="table-check">
                                    <label class="form-check-label" for="table-check"></label>
                                <% } else { %>
                                    <input class="form-check-input" type="checkbox" value="" disabled id="table-check">
                                    <label class="form-check-label" for="table-check"></label>
                                <% } %>
                            </div>
                        </td>
                        <td>
                            <button type="button" class="btn btn-link edit-button" data-toggle="modal" data-target="#edit-modal">
                                <i class="fas fa-pencil-alt"></i>
                            </button>
                        </td>
                    </tr>
                <% }); %>
            </div>
        </tbody>
    </table>
</div>

用于用新行替换行的 Javascript，我有一个模式，当提交时，此代码将运行:

var row = 
    '<tr>' +
        '<th scope="row" id="table-report">' + data.report + '</th>' +
        '<td id="table-interval">' + data.interval + '</td>' +
        '<td id="table-timing">@' + data.timing + '</td>' +
        '<td id="table-enabled">' +
            '<div class="custom-control custom-switch">' +
                '<input class="form-check-input" type="checkbox" value="" disabled ' + checked + ' id="table-check">' +
                '<label class="form-check-label" for="table-check"></label>' +
            '</div>' +
        '</td>' +
        '<td>' +
            '<button type="button" class="btn btn-link edit-button" data-toggle="modal" data-target="#edit-modal">' +
                '<i class="fas fa-pencil-alt"></i>' +
            '</button>' +
        '</td>' +
    '</tr>';

$("tr").eq(rowNum).replaceWith(row);

我从用户点击表中一行的编辑按钮得到 rowNum:

rowNum = ($(this).index());

我知道 rowNum 具有正确的值，但无法弄清楚为什么没有替换该行，只是添加了新行。

在此先感谢您的帮助!

Answer 1

$("tr").eq(rowNum).replaceWith(row); 函数将删除包含行内容的索引 rowNum。

我重现了它并且运行良好，您可以在源代码中检查更多细节。

function replace(){
let data = { report : "A", interval: 100, timing: 15};
let checked = false;
var row = 
    '<tr>' +
        '<th scope="row" id="table-report">' + data.report + '</th>' +
        '<td id="table-interval">' + data.interval + '</td>' +
        '<td id="table-timing">' + data.timing + '</td>' +
        '<td id="table-enabled">' +
            '<div class="custom-control custom-switch">' +
                '<input class="form-check-input" type="checkbox" value="" disabled ' + checked + ' id="table-check">' +
                '<label class="form-check-label" for="table-check"></label>' +
            '</div>' +
        '</td>' +
        '<td>' +
            '<button type="button" class="btn btn-link edit-button" data-toggle="modal" data-target="#edit-modal">' +
                '<i class="fas fa-pencil-alt"></i>' +
            '</button>' +
        '</td>' +
    '</tr>';

let rowNum = 1;
$("tr").eq(rowNum).replaceWith(row);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.css" />
<div class="table-responsive-md table-hover">
    <table class="table table-striped table-sm" id="setup-table">
        <thead>
            <tr>
                <th scope="col">Report</th>
                <!-- <th scope="col">Category</th> -->
                <th scope="col">Interval</th>
                <th scope="col">Timing</th>
                <th scope="col">Enabled</th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            <div class="row text-center" style="display:flex; flex-wrap:wrap;">
               
                    <tr>
                        <th scope="row" id="table-report">report</th>
                       
                        <td id="table-interval">interval</td>
                        <td id="table-timing">timing</td>
                        <td id="table-enabled">
                            <div class="custom-control custom-switch">
                                

                               
                                    <input class="form-check-input" type="checkbox" value="" checked disabled id="table-check">
                                    <label class="form-check-label" for="table-check"></label>
                               
                            </div>
                        </td>
                        <td>
                            <button type="button" class="btn btn-link edit-button" data-toggle="modal" data-target="#edit-modal">
                                <i class="fas fa-pencil-alt"></i>
                            </button>
                        </td>
                    </tr>
                    
                    <tr>
                        <th scope="row" id="table-report">report</th>
                       
                        <td id="table-interval">interval</td>
                        <td id="table-timing">timing</td>
                        <td id="table-enabled">
                            <div class="custom-control custom-switch">
                                

                               
                                    <input class="form-check-input" type="checkbox" value="" checked disabled id="table-check">
                                    <label class="form-check-label" for="table-check"></label>
                               
                            </div>
                        </td>
                        <td>
                            <button type="button" class="btn btn-link edit-button" data-toggle="modal" data-target="#edit-modal">
                                <i class="fas fa-pencil-alt"></i>
                            </button>
                        </td>
                    </tr>
                
            </div>
        </tbody>
    </table>
</div>

<button onclick="replace()">Replace</button>