表格搜索栏JavaScript代码优化：修复错误信息显示异常

问题现象 #

表格搜索栏存在逻辑错误：当匹配的行是最后一行时，错误提示不会误显示；但如果匹配行不是最后一行，后续不匹配的行会错误触发“未找到用户”提示，无法实现仅无搜索结果时才显示错误信息的需求。

原JavaScript代码 #

function search() {
    let input, filter, table, tr, td, txtValue;
    input = document.getElementById("search");
    filter = input.value;
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (let i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
            txtValue = td.textContent || td.innerText;
            if (txtValue.indexOf(filter) > -1) {
                tr[i].classList.remove("hidden");
                document.getElementById("error-message").classList.add("hidden");
            }
            else {
                document.getElementById("error-message").classList.remove("hidden");
                tr[i].classList.add("hidden");
            }
        }
    }
}

对应HTML代码（含Razor语法） #

@model IEnumerable<ProvinceLevel>

@{
    ViewData["Title"] = "مدیریت - نمایش سطح استان";
}
<div class="btn btn-outline-primary btn-sm  my-1 mx-3">نمایش سطح استان</div>
<div class="row m-0 p-0">
    <div class="col-md-5 p-0 ml-3">
        <input type="search" id="search" class="form-control w-100" placeholder="نام کاربری" maxlength="10" />
    </div>
    <div class="col-md-2">
        <button class="btn btn-info mx-1" onclick="search()">جست و جو</button>
    </div>
</div>

<table id="myTable" class="table border table-striped table-bordered mt-2 mx-auto table-custom--2">
    <thead>
        <tr>
            <th>نام کاربری</th>
            <th>رمز عبور</th>
            <th>نام</th>
            <th>نام خانوادگی</th>
            <th>نفش</th>
            <th>جنسیت</th>
            <th>وضعیت استخدامی</th>
            <th>کارکرد</th>
            <th>بیمه</th>
            <th>امتیاز</th>
            <th>شماره تماس</th>
            <th>وضعیت تاهل</th>
            <th>آدرس محل سکونت</th>
            <th>حذف</th>
            <th>ویرایش</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.nationalCode</td>
                <td>@item.userPass</td>
                <td>@item.fName</td>
                <td>@item.lName</td>
                <td>@item.role</td>
                <td>@item.gender</td>
                <td>@item.employmentStatus</td>
                <td>@item.workingStatus</td>
                <td>@item.insuranceStatus</td>
                <td>@item.score</td>
                <td>@item.tel</td>
                <td>@item.maritalStatus</td>
                <td>@item.address</td>
                <td><a><img src="~/icons/clear-icon.png" /></a></td>
                <td><a><img src="~/icons/edit-icon.png" /></a></td>
            </tr>
        }
    </tbody>
</table>
<div class="mx-auto my-5 w-25 hidden" id="error-message">
    <div class="alert alert-warning text-center border border-warning">کاربر مورد نظر یافت نشد</div>
</div>

问题根源 #

原代码在循环遍历每一行时，每一次判断都会修改错误提示的显示状态：如果当前行匹配就隐藏提示，不匹配就显示提示。这意味着只要最后一行不匹配，不管前面有没有匹配行，错误提示都会被打开；只有最后一行匹配时，提示才会被关闭，完全不符合需求逻辑。

修正后的JavaScript代码 #

function search() {
    let input, filter, table, tr, td, txtValue;
    input = document.getElementById("search");
    filter = input.value.trim(); // 去除首尾空格，避免空输入误判
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    let hasMatch = false; // 标记是否存在匹配结果

    // 先隐藏错误提示，避免初始状态干扰
    document.getElementById("error-message").classList.add("hidden");

    for (let i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
            txtValue = td.textContent || td.innerText;
            if (txtValue.indexOf(filter) > -1) {
                tr[i].classList.remove("hidden");
                hasMatch = true; // 找到匹配，更新标记
            } else {
                tr[i].classList.add("hidden");
            }
        }
    }

    // 循环结束后统一判断是否显示错误提示
    if (!hasMatch) {
        document.getElementById("error-message").classList.remove("hidden");
    }
}

关键修改点 #

• 添加hasMatch布尔变量，全程仅用于记录是否存在匹配行，不在循环中修改错误提示状态
• 循环开始前先默认隐藏错误提示，避免残留状态干扰
• 循环结束后统一根据hasMatch的值决定是否显示错误提示，确保逻辑准确
• 新增filter = input.value.trim()，处理用户输入空格的情况，避免空输入时错误隐藏所有行

内容的提问来源于stack exchange，提问作者Ashkan Amjad