JavaScript:Button禁用仅在表的最后一行上工作

时间:2017-09-13 09:34:10

标签: javascript

我在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>

1 个答案:

答案 0 :(得分:0)

我正在使用类似您的函数,并且遇到了同样的问题。因此,我尝试解决创建计数器的问题。因此,我没有使用警报。尝试这样做:

    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
           }
        }
    }

正如我所说,我在函数中插入了这些代码,效果很好。我没有尝试过您的功能,只是根据我的信息调整了您的功能。希望我能帮上忙。