Javascript 隐藏/取消隐藏基于文本框 keyup 的 viewbag 项目

Question

我希望我的用户在文本框字段中输入他们的登录名，并在下面显示一个单选按钮列表，其中包含与其用户名相关联的患者组。然而，我似乎只能让我的 Viewbag 中的第一个项目工作。下面是我正在使用的js。<script>        var check = function () {                           if (document.getElementById('Username').value ==                         document.getElementById('projects').getAttribute("name"))                  {                             var userName = document.getElementById('Username').value;                             document.getElementsByName(userName)[0].style.display = 'table-row';                     }                  else                  {                     document.getElementById('projects').style.display = 'none';                     }             }            </script>这是正文：<div class="row">        <div class="col-md-8">            <form asp-action="SubmitAttempt" method="post">                <div class="form-group">                    <label name="Username" class="control-label">Enter Username</label>                    <input name="Username" id="Username" class="form-control" required onkeyup="check();"/>                </div>               <div class="form-group">                    <label name="Email" class="control-label">Enter Email Address</label>                    <input name="Email" class="form-control" required />                </div>                <table border="1" style="margin: 5px">                    @if (ViewBag.Subs != null)                    {                        foreach (var subs in ViewBag.Subs)                        {                        <tr id="projects" name="@subs.Username" style="display:none" value="@subs.Username">                            <td><input type="radio" value="@subs.PatientName" name="PatientName" class="form-control"/></td>                            <td>@subs.ProjectName</td>                            <td>&nbsp;</td>                            <td>@subs.PatientSet</td>                        </tr>                        }                    }    我应该在我的 js 中使用循环来检查每个 tr 并与文本输入进行比较吗？

Answer 1

我应该在我的 js 中使用循环来检查每个 tr 并与文本输入进行比较吗？

是的，需要用循环来逐个比较。

另外，你的代码有一些错误，我建议不要使用Id选择器，因为相同id的tr有很多，使用Id选择器总是选择第一个。

我做了一些修改，你可以参考下面的代码：

<table border="1" style="margin: 5px">

    @if (ViewBag.Subs != null)

    {

        foreach (var subs in ViewBag.Subs)

        {

            <tr id="projects" name="subsName" style="display:none" value="@subs.UserName">

                <td><input type="radio" value="@subs.PatientName" name="PatientName" class="form-control" /></td>

                <td>@subs.ProjectName</td>

                <td>&nbsp;</td>

                <td>@subs.PatientSet</td>

            </tr>

        }

    }

</table>

<script>

    var check = function () {

        var userName = document.getElementById('Username').value;

        var trs = document.getElementsByName('subsName');

        for (var i = 0; i < trs.length; i++) {

            if (userName == trs[i].getAttribute("value")) {

                trs[i].style.display = 'table-row';

            }

            else {

                trs[i].style.display = 'none';

            }

        }

    }

</script>