ABP 5.3.1 MVC模态框内JavaScript代码无法触发问题求助

问题背景 #

技术栈：.NET MVC + EF Core，ABP版本5.3.1，未使用Angular
需求：在ABP模态框内的表格实现动态搜索功能，搜索表格第三列（表头标注为"3"）的内容
问题：表格样式正常，但输入框的搜索JS完全没有触发效果

问题原因分析 #

1. JS语法错误：原代码中字符串匹配逻辑写法错误，txtValue.indexOf.toUpperCase(filter) 是错误的调用方式——indexOf是字符串方法，需要先调用toUpperCase()转换文本，再传入过滤值调用indexOf。
2. 列索引错误：原代码中尝试获取索引为3的td，但目标列（第三列）对应的td索引是2（数据行中第一个td是索引0，依次递增）。
3. （潜在）模态框动态DOM加载：ABP模态框是动态渲染的，内联事件绑定可能存在作用域问题，但核心问题还是前两点的代码错误导致函数执行失败。

修复步骤 #

1. 修正表格列索引 #

将获取目标列的代码从：

td = tr[i].getElementsByTagName("td")[3];

改为：

td = tr[i].getElementsByTagName("td")[2];

2. 修正字符串匹配逻辑 #

将匹配判断代码从：

if (txtValue.indexOf.toUpperCase(filter) > -1) {

改为：

if (txtValue.toUpperCase().indexOf(filter) > -1) {

3. （可选）改用事件委托绑定事件 #

为避免模态框动态加载带来的事件绑定问题，可以移除内联onkeyup属性，改用JS事件委托：

<!-- 移除输入框的onkeyup属性 -->
<input type="text" id="myInput" placeholder="Search for names..">

然后修改脚本：

document.addEventListener('DOMContentLoaded', function() {
    const input = document.getElementById('myInput');
    input.addEventListener('keyup', myFunction);
});

完整修复后的代码示例 #

@page
@using xxx.Localization
@using xxx.xxx.Web.Pages.xxx
@using Microsoft.Extensions.StringLocalization
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
@model xxxModalModel
@inject IStringLocalizer<xxxx> L
@{ 
    Layout = null;
}
<style>
    #myInput {
        width: 100%; /* Full-width */
        font-size: 10px; /* Increase font-size */
        padding: 5px 5px 5px 5px; /* Add some padding */
        border: 1px solid #ddd; /* Add a grey border */
        margin-bottom: 5px; /* Add some space below the input */
    }

    #myTable {
        border-collapse: collapse; /* Collapse borders */
        width: 100%; /* Full-width */
        border: 1px solid #ddd; /* Add a grey border */
        font-size: 10px; /* Increase font-size */
    }

    #myTable th, #myTable td {
        text-align: left; /* Left-align text */
        padding: 5px; /* Add padding */
    }

    #myTable tr {
        /* Add a bottom border to all table rows */
        border-bottom: 1px solid #ddd;
    }

    #myTable tr.header, #myTable tr:hover {
        /* Add a grey background color to the table header and on hover */
        background-color: #f1f1f1;
    }
</style>
<form asp-page="/xxx/xxx">
    <abp-modal>
        <abp-modal-header title="@L["xxx"].Value"></abp-modal-header>
        <abp-modal-body>
            <abp-input asp-for="Id" />
            <input type="text" id="myInput" placeholder="Search for names..">
            <abp-table responsive-md="true" small="true" striped-rows="true" id="myTable" border-style="Bordered">
                <thead>
                    <tr>
                        <th scope="Column">#</th>
                        <th scope="Column">1</th>
                        <th>2</th>
                        <th>3</th>
                        <th>4</th>
                        <th>5</th>
                        <th>6</th>
                    </tr>
                </thead>
                <tbody>
                    @{
                        var sutun = 1;
                        for (var i = 0; i < Model.xxx.Count; i++)
                        {
                            if (@Model.xxx[i].IsSelected)
                            {
                                var x= Model.xxx[i];
                                <tr>
                                    <th scope="Row">@sutun</th>
                                    <td>@Model.xxx[i].1</td>
                                    <td>@Model.xxx[i].2</td>
                                    <td>@Model.xxx[i].3</td>
                                    <td>@Model.xxx[i].4</td>
                                    <td>@Model.xxx[i].5</td>
                                    <td>@Model.xxx[i].6</td>
                                </tr>
                                sutun +=1;
                            }
                        }
                    }
                </tbody>
            </abp-table>
        </abp-modal-body> 
        <abp-modal-footer></abp-modal-footer>
    </abp-modal>
</form>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const input = document.getElementById('myInput');
    input.addEventListener('keyup', myFunction);
});

function myFunction() {
    // Declare variables
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");

    // Loop through all table rows, and hide those who don't match the search query
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[2];
        if (td) {
            txtValue = td.textContent || td.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }
    }
}
</script>

内容的提问来源于stack exchange，提问作者Yiğit ALİŞAN