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>