运行javascript不运行CSS

Question

我需要Javascript和CSS的帮助。 我有一个运行良好的脚本，但是当我在顶部执行过滤功能时，我的CSS将不会运行，只有过滤后的结果会显示在HTML页面中。 在执行javascript时寻求建议。

<script>
      var createTable = function(){
      var street = document.getElementById("search-street").value;
      var suburb = document.getElementById("search-suburb").value;
      var pc = document.getElementById("search-pc").value;
      var type = document.getElementById("search-type").value;
      var counter=0;
      if (street == '' && suburb == '' && pc == '' && type == '') {
        for(i=0;i<myArray.length;i++){
          var id = myArray[i][4];
          if(counter%3==0){
            document.write("<div class='row'>");
          }
          document.write("<div class='col-sm-6 col-md-4'>");
          document.write("<div class='thumbnail'>");
          document.write("<div class='caption'>");
          document.write("<p>" + myArray[i][3] + "</p>");
          document.write("<p><a href='edit_property.php?id="+id+"' class='btn btn-default' role='button'>Edit</a> <a href='#delete_property.php?id="+id+"' class='btn btn-danger' role='button'>Delete</a></p>");
          document.write("</div>");
          document.write("</div>");
          document.write("</div>");
          counter++;
          if(counter%3==0){
           document.write("</div>");
          }
        }
      } else {
        for(i=0;i<myArray.length;i++){
          var id = myArray[i][4];
          if(counter%3==0){
            document.write("<div class='row'>");
          }
          if(street==myArray[i][0] || suburb==myArray[i][1] || pc==myArray[i][2] || type==myArray[i][3]){
            document.write("<div class='col-sm-6 col-md-4'>");
            document.write("<div class='thumbnail'>");
            document.write("<div class='caption'>");
            document.write("<p>" + myArray[i][3] + "</p>");
            document.write("<p><a href='edit_property.php?id="+id+"' class='btn btn-default' role='button'>Edit</a> <a href='#delete_property.php?id="+id+"' class='btn btn-danger' role='button'>Delete</a></p>");
            document.write("</div>");
            document.write("</div>");
            document.write("</div>");
            counter++;
          }
          if(counter%3==0){
           document.write("</div>");
          }
        }
      }
    }
    createTable();
    </script>

Answer 1

请勿使用document.write，使用变量以及在元素内替换或添加内容。

试试这个小提琴： https : //jsfiddle.net/cq14qot3/

var myArray = [["1", "2", "3", "4", "5"],["6", "7", "8", "9", "10"]];
    var createTable = function() {
        var street = document.getElementById("search-street").value;
        var suburb = document.getElementById("search-suburb").value;
        var pc = document.getElementById("search-pc").value;
        var type = document.getElementById("search-type").value;
        var counter = 0;
        var outputHTML = '';
        if (street == '' && suburb == '' && pc == '' && type == '') {
            for (i = 0; i < myArray.length; i++) {
                var id = myArray[i][4];
                if (counter % 3 == 0) {
                    outputHTML += ("<div class='row'>");
                }
                outputHTML += ("<div class='col-sm-6 col-md-4'>");
                outputHTML += ("<div class='thumbnail'>");
                outputHTML += ("<div class='caption'>");
                outputHTML += ("<p>" + myArray[i][3] + "</p>");
                outputHTML += ("<p><a href='edit_property.php?id=" + id + "' class='btn btn-default' role='button'>Edit</a> <a href='#delete_property.php?id=" + id + "' class='btn btn-danger' role='button'>Delete</a></p>");
                outputHTML += ("</div>");
                outputHTML += ("</div>");
                outputHTML += ("</div>");
                counter++;
                if (counter % 3 == 0) {
                    outputHTML += ("</div>");
                }
            }
        } else {
            for (i = 0; i < myArray.length; i++) {
                var id = myArray[i][4];
                if (counter % 3 == 0) {
                    outputHTML += ("<div class='row'>");
                }
                if (street == myArray[i][0] || suburb == myArray[i][1] || pc == myArray[i][2] || type == myArray[i][3]) {
                    outputHTML += ("<div class='col-sm-6 col-md-4'>");
                    outputHTML += ("<div class='thumbnail'>");
                    outputHTML += ("<div class='caption'>");
                    outputHTML += ("<p>" + myArray[i][3] + "</p>");
                    outputHTML += ("<p><a href='edit_property.php?id=" + id + "' class='btn btn-default' role='button'>Edit</a> <a href='#delete_property.php?id=" + id + "' class='btn btn-danger' role='button'>Delete</a></p>");
                    outputHTML += ("</div>");
                    outputHTML += ("</div>");
                    outputHTML += ("</div>");
                    counter++;
                }
                if (counter % 3 == 0) {
                    outputHTML += ("</div>");
                }
            }
        }
        document.body.innerHTML = outputHTML;
        alert(outputHTML);
    }
    createTable();