在部分視圖中訪問表

Question

我正在嘗試通過添加行來編輯表，但遇到部分視圖無法完全呈現的問題（這是我的假設）

我通過頁面加載和Ajax調用將部分加載到其div中。

<div id="preTestSteps">
</div>

<div id="mainTestSteps">
</div>

<div id="postTestSteps">
</div>

腳本；

    $(document).ready(function() {
        var testSuiteExecutionId = @(Model.TestSuiteExecutionId);
        var testSuiteId = @(Model.TestSuiteId);

        loadTestStepResultsPartialView(testSuiteExecutionId, testSuiteId, 1, "preTestSteps");
        loadTestStepResultsPartialView(testSuiteExecutionId, testSuiteId, 0, "mainTestSteps");
        loadTestStepResultsPartialView(testSuiteExecutionId, testSuiteId, 2, "postTestSteps");
    });

    function loadTestStepResultsPartialView( testSuiteExecutionId, testSuiteId, testStepType, divId) {
        $.ajax({
            type: 'POST',
            url: '@Url.Action("DetailsTestStepResults", "TestSuiteExecutions")',
            data: { 'testSuiteExecutionId': testSuiteExecutionId, 'testSuiteId': testSuiteId, 'testStepType': testStepType },
            success: function(data) {
                $("#" + divId).html(data);

            }
        });

在部分視圖中，該表具有唯一的ID，可以訪問該ID進行追加（視圖模型是視圖模型的列表，使用的第一個索引是獲取對於日志列表而言唯一的數據）；

<div id="@collapseStepItemName" class="collapse col-sm-12" role="tabpanel" aria-labelledby="headingOne">
                    <div class="card-body">
                        <table class="table" id="logTable_@Model[0].TestStepId@Model[0].MessageType">
                            <thead>
                            <tr>
                                <th width="5%"></th>
                                <th width="20% !important">Time</th>
                                <th width="75%">Message</th>
                            </tr>
                            </thead>
                            <tbody>
                                @foreach (var logEntry in Model)
                                {
                                    <tr id="tableRow_@logEntry.TestStepId@logEntry.MessageType">
                                        <td><img width="20" height="20" src="~/Content/Images/@HtmlUtilities.GetTestSuiteExecutionIconName(logEntry.LogType)" /></td>
                                        <td><i>@logEntry.TimeStamp</i></td>
                                        <td><i>@Html.Raw(HtmlUtilities.GetHtmlFormattedString(logEntry.Message))</i></td>
                                    </tr>
                                }
                            </tbody>
                        </table>
                    </div>

當前的測試代碼（出於測試目的，具有硬編碼的tableID）如下；

    var tableId = "logTable_" + 44 + "False";

    var newRow = document.getElementById(tableId).insertRow();
    newRow.innerHTML="<td>New row text</td><td>New row 2nd cell</td><td>Please work</td>";

瀏覽器調試中引發以下錯誤；

Uncaught TypeError: Cannot read property 'insertRow' of null

部分視圖完全渲染后，是否可以執行腳本？ 還是這個問題是其他原因而不是由於加載了視圖？

我通過在主視圖中的表上對其進行測試來確保表附加腳本確實有效，並且按預期工作。

Answer 1

由於您使用的是jQuery ，因此請將以下代碼放在document.ready函數中：

$(document).ready(function() {

    // other stuff

    var tableId = "logTable_" + @Model[0].TestStepId + @Model[0].MessageType;
    var row = $('<tr>').append('<td>New row text</td><td>New row 2nd cell</td><td>Please work</td>');

    $('#' + tableId).find('tbody').append(row);
});

如果您堅持使用香草JS添加行，請確保已按照以下示例中的說明加載了所有DOM對象 ：

document.addEventListener("DOMContentLoaded", function (ev) { 
    var tableId = "logTable_" + @Model[0].TestStepId + @Model[0].MessageType;

    var newRow = document.getElementById(tableId).insertRow();
    newRow.innerHTML="<td>New row text</td><td>New row 2nd cell</td><td>Please work</td>";
}

insertRow后面具有空值的原因是執行添加行腳本時表DOM元素可能未完全加載，因此，當所有必需的DOM元素完成時，行添加腳本應運行。

演示示例： JSFiddle