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">&nbsp; &nbsp; @if (ViewBag.Subs != null)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; foreach (var subs in ViewBag.Subs)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr id="projects" name="subsName" style="display:none" value="@subs.UserName">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><input type="radio" value="@subs.PatientName" name="PatientName" class="form-control" /></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>@subs.ProjectName</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>@subs.PatientSet</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }</table><script>&nbsp; &nbsp; var check = function () {&nbsp; &nbsp; &nbsp; &nbsp; var userName = document.getElementById('Username').value;&nbsp; &nbsp; &nbsp; &nbsp; var trs = document.getElementsByName('subsName');&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < trs.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (userName == trs[i].getAttribute("value")) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; trs[i].style.display = 'table-row';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; trs[i].style.display = 'none';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }</script>