JavaScript：按钮禁用仅在表格的最后一行工作

Question

我在一个 html 表中进行了搜索，如果表中存在卡号，它会将按钮设置为禁用。 这意味着如果用户在文本框中输入“123”并且它出现在表格中，则提交按钮将被禁用。 我注意到虽然window.alert与每个匹配行一起显示，但只有当卡号位于表格的最后一行时，该按钮才会被禁用。 我在(indexOf(filter)之后干预了参数，但这会导致多个警报。

功能

<script>    

            function myFunction() {
              // Declare variables 
              var input, filter, table, tr, td, i;
              input = document.getElementById("cardNo");
              filter = input.value.toUpperCase();
              table = document.getElementById("table");
              tr = table.getElementsByTagName("tr");

              // Loop through all table rows, and hide those who don't match the search query
                if(input.value.length == 4){
                  for (i = 0; i < tr.length; i++) {
                    td = tr[i].getElementsByTagName("td")[0];
                        if (td) 
                            {
                            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                                tr[i].style.display = "";
                                window.alert("Card Already in Use");
                                $('#submit').prop('disabled', true);
                                } else {
                                tr[i].style.display = "none";
                                $('#submit').prop('disabled', false);
                                }
                            } 
                        }
                }
            }

        </script>

Answer 1

我正在使用像您这样的功能，但遇到了同样的问题。 所以，我试图解决创建一个计数器的问题。 因此，我没有使用警报。 尝试这样做：

    function myFunction() {
      // Declare variables 
      var input, filter, table, tr, td, i;
      input = document.getElementById("cardNo");
      filter = input.value.toUpperCase();
      table = document.getElementById("table");
      tr = table.getElementsByTagName("tr");



      // Loop through all table rows, and hide those who don't match the search query
        if(input.value.length == 4){
          //COUNTER
          var count = 0;
          for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0];
            //if (td) { // I don't think so you need to use this if. I didn't use on my function
                    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = "";
                        //window.alert("Card Already in Use"); //commented to avoid to show it all the time
                        $('#submit').prop('disabled', true);
                        count = 1;
                    } else {
                        tr[i].style.display = "none";
                        if (count == 0) { // to make on the button
                            $('#submit').prop('disabled', false);
                        }
                    }
              //} //commented
           }
        }
    }

正如我所说，我在我的函数中插入了这些代码，效果很好。 我没有尝试你的功能，我只是用我的信息调整了你的功能。 我希望我有所帮助。