자바 스크립트가 실행되지 않습니다. CSS

Question

자바 스크립트와 CSS에서 도움이 필요합니다. 나는 정상적으로 작동하는 스크립트를 가지고 있지만 위에 필터링 기능을 수행하면 CSS가 실행되지 않고 필터링 된 결과 만 HTML 페이지에 표시됩니다. 자바 스크립트를 수행하는 조언을 구합니다.

<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();