Question

我目前正在尝试选择自动填充文字列出的选项。我想在从表格中选择项目时制作突出显示选项。我的代码到目前为止

<div class="col-md-6">
   <table class="table datatable-responsive datatable-medical-map" id="medProviders" style="width:100%">
      <thead>
         <tr class="bg-info">
            <th>Medical Provider (* Choose one)</th>
            <th>Distance (miles)</th>
            <th>Duration</th>
         </tr>
      </thead>
      <tbody>
         @{  int i = 0;                                                                                                               
         foreach (var item in medProviders)
         {
         <tr class="sortList" style="cursor:pointer" id="increment-@i" data-id="@item.Id" data-lat="@item.Latitude" data-long="@item.Longitude">
            <td>@item.Firstname
               <br />*ABR
            </td>
            <td id="distance-@i"></td>
            <td id="duration-@i"></td>
         </tr>
         i++;
         }                                                                                                                        
         }
      </tbody>
   </table>
   <p id="medicalValidation"></p>
</div>
</div>
<script>
   // Add active class to the current button (highlight it)
 var header = document.getElementById("sortList");
 var btns = header.getElementsByClassName("list-group nav nav-pills nav-stacked");
 for (var i = 0; i < sortList.length; i++) {
     btns[i].addEventListener("click", function() {
         var current = document.getElementsByClassName("active");
         current[0].className = current[0].className.replace(" active", "");
         this.className += " active";
     });
 }

</script>

的style.css

<style>
        #mapedit {
            width: 100%;
            height: 400px;
        }

        .dataTables_scroll
        {
           overflow-y:auto;
           height: 200px; 
           overflow-x: hidden;
        } 
        #list-group nav nav-pills nav-stacked{
            border: none;
            outline: none;
            padding: 10px 16px;
            background-color: #f1f1f1;
            cursor: pointer;
            font-size: 18px;
        }
        .active {
        background-color: #666;
        color: white;
        }


    </style>

此选项对我不起作用。我犯错误的家伙？有人可以解释一下吗？

Answer 1

问题是sortList未定义，这就是您收到此错误的原因。

Uncaught ReferenceError

在您的javascript更改sortList中btns

  // Add active class to the current button (highlight it)
 var btns = document.getElementsByClassName("list-group nav nav-pills nav-stacked");
 for (var i = 0; i < btns.length; i++) {
     btns[i].addEventListener("click", function() {
         var current = document.getElementsByClassName("active");
         current[0].className = current[0].className.replace(" active", "");
         this.className += " active";
     });
 }

如何突出显示项目JavaScript

1 个答案: