使用JavaScript在第三列进行HTML表格搜索

系统三重

我正在尝试在表empTable中使用IsProtected搜索存在的任何员工状态。如果存在任何行，则变量ProtectedIsfound必须为true

    <table id="empTable" >
    <tr>
        <th>
            Employee Name
        </th>
        <th>
            Designation
        </th>
     <th>
            Status
        </th>
        
    </tr>
for (i = 0; i < Model.attendanceLogList.Count; i++)
{
    <tr>
               <td>@Model.attendanceLogList[i].EmployeeName</td>
               <td>@Model.attendanceLogList[i].Designation</td>
           <td>@Model.attendanceLogList[i].IsProtected</td>  // it is boolean in model
       
      </tr>
}


</table>
<script>
    var ProtectedIsfound = True // if any record exist with the value is Protected in the column status in the table empTable 
</script>

吕志

我正在尝试在表empTable中使用IsProtected搜索存在的任何员工状态。如果存在任何行，则变量ProtectedIsfound必须为true

您是说每一行，如果IsProtected为true，那么ProtectedIsFound必须为true？在这种情况下，请参考以下方法：

使用JavaScript或JQuery方法：遍历表行和单元格并检查IsProtected是否为true，然后根据结果更改ProtectedIsFound值。

 @*JQuery reference*@
 <script src="~/lib/jquery/dist/jquery.js"></script>
 <script type="text/javascript">
     var ProtectedIsfound = false // default value. 
     //JavaScript method:
     document.addEventListener("DOMContentLoaded", function (event) {
         //loop through the tr and td, then based on the IsProtected value to change the ProtectedIsFound value.
         var trlist = document.getElementById("empTable").getElementsByTagName("tr");
         for (var i = 1; i < trlist.length; i++) {
             if (trlist[i].getElementsByTagName("td")[2].innerText.toLowerCase() == "true") { 
                 ProtectedIsfound = true;
                 break;
             }
         }
         console.log(ProtectedIsfound);
     });
     //JQuery script
     $(function () {
         $("#empTable").find("tr:not(:first-child)").each(function (index, item) {
             if ($(item).find("td")[2].innerText.toLowerCase() == "true") {
                 ProtectedIsfound = true;
                 return false;
             }
         });
         console.log(ProtectedIsfound);
     });
 </script>

使用Where和Select语句，代码如下：

 <script type="text/javascript">
     var ProtectedIsfound = @Model.attendanceLogList.Where(c => c.IsProtected ==true).Select(c=>c).ToList().Count > 0 ? true : false;
     console.log(ProtectedIsfound); 
 </script>

HTML页面元素如下（Asp.net核心Razor页面应用程序）：

    @page
    @model RazorWebApplication5.Pages.HtmlTableModel
    @{ 
    }
        <table id="empTable">
            <tr>
                <th>
                    Employee Name
                </th>
                <th>
                    Designation
                </th>
                <th>
                    Status
                </th>

            </tr>
            @for (var i = 0; i < Model.attendanceLogList.Count; i++)
            {
                    <tr>
                        <td>@Model.attendanceLogList[i].EmployeeName</td>
                        <td>@Model.attendanceLogList[i].Designation</td>
                        <td>@Model.attendanceLogList[i].IsProtected</td>  @*// it is boolean in model*@

                    </tr>
            }
        </table>

.cshtml.cs文件：

    public class HtmlTableModel : PageModel
    {
        public List<AttendanceLog> attendanceLogList { get; set; }
        public void OnGet()
        {
            //initial data
            attendanceLogList = new List<AttendanceLog>()
            {
                new AttendanceLog(){ EmployeeName="Tom", Designation="A", IsProtected=false},
                new AttendanceLog(){ EmployeeName="Jack", Designation="B", IsProtected=false},
                new AttendanceLog(){ EmployeeName="Lucy", Designation="CC", IsProtected=true},
                new AttendanceLog(){ EmployeeName="Daive", Designation="D", IsProtected=false},
                new AttendanceLog(){ EmployeeName="Hanke", Designation="E", IsProtected=false}
            };
        }
    }

    public class AttendanceLog
    {
        public string EmployeeName { get; set; }
        public string Designation { get; set; }
        public bool IsProtected { get; set; }
    }

测试结果：