동적으로 생성 된 테이블 쿼리

내 사이트에 사용자가 항목 데이터베이스를 볼 수있는 페이지가 있습니다. 그것은 일부 사용자가 개별적으로 각 열을 검색 할 수있는 기능을 요구하고 순간의 약자로서 무게동적으로 생성 된 테이블 쿼리

- 제품명 - - 한 brandname

바코드 : 그것은 매우 간단한 형식을 가지고있다. 예를 들어, 3 개 샘플 항목이 있었다 :

0000001 - 맥북 프로 - 애플 - 맥북 에어 - - 애플 - 애플 - - 그래 니 스미스 -

0,000,003 1.5kg의 200g

0,000,002 1.5KG 각 행을 개별적으로 쿼리 할 수있는 기능을 원합니다 (알파벳순으로 정렬 할 수도 있습니다). 그래서 productName 텍스트 입력 필드에 가서 'apple'을 입력하면 행 1 & 2가 일시적으로 사라져 나머지 행만 남게됩니다.

나는 부착도 사진을 내 샘플 JS & html 코드를 부착 한

HTML :

<body> 
    <div id="header"></div> 
    <div id="content"></div><!-- This is where the content will be loaded --> 


    <table class="contenttable" style = "width: 40%;"> 
     <tr id="searchBoxes"> 
      <td><input type="text" placeholder="Search"></td><!-- Searches barcodeID --> 
      <td><input type="text" placeholder="Search"></td><!-- Searches ProductName --> 
      <td><input type="text" placeholder="Search"></td><!-- Searches BrandName --> 
      <td><input type="text" placeholder="Search"></td><!-- Searches Weight --> 

     </tr> 
     <tr id="columnNames"> 
      <td><b>BarcodeID</b></td> 
      <td><b>ProductName</b></td> 
      <td><b>BrandName</b></td> 
      <td><b>Weight</b></td> 
     </tr> 
     <tr id="final_row"></tr> 
     <div class="error" id="display_error"></div> 
    </table> 

</body>

JS 코드 :

$(document).ready(function(){ 
$.get("../php/security.php", function(response){ 
     if(response.result == "failure"){ 
      location.href='../user_login.html'; 
     } else { 
      $("#header").load("../header_logout.html"); 
      //from here down is the relevant code 
      $.post("../php/item_database.php", {email1:response.data.authUser}, function(indata){ 
       indata.items.forEach(function(element){ 
        $BarcodeID = element.BarcodeID; 
        $ProductName = element.ProductName; 
        $BrandName = element.BrandName; 
        $Weight = element.Weight; 
        $row = "<tr class='row'><td class='rowbarcode'>" + $BarcodeID + "</td>" + "<td>" + $ProductName + "</td>" + "<td>" + $BrandName + "</td>" + "<td>" + $Weight + "</td>" + "<td>" + "<button class='delete'>Delete</button>" + "</td></tr>"; 
        $("#final_row").before($row); 
       }); 
      }, "json");//eo post 
     } //eo else 
}, "json"); //eo get 

$(".contenttable").on('click', '.delete', function(){ 
    var BarcodeID = $(this).closest('tr').find('.rowbarcode').text(); //get barcode of row to delete 
    console.log(BarcodeID); 
    //send barcode ID and UserID to removescan.php to delete from DB 
}); 

});//eof

출처

2016-11-20 James Dorrian

당신은 JQuery와-datatables으로 쉽게 할 수 있습니다. –

또는 수많은 기타 표/표 플러그인. 이것을 위해 바퀴를 다시 발명하려고하지 마십시오. – charlietfl

그래서, 단지 아무도 관심이 없다면 JS를 사용할 때 이벤트 바인딩의 echnique, JQuery-datatables와 같은 jquery 플러그인은 불편합니다. 그래서 여기에 검색 상자에 입력 한 내용에 따라 행이 사라지는 순수 JS 솔루션이 있습니다. 삭제 기능은 여전히 완벽하게 작동합니다.

JS 코드 :

$("#search").keyup(function() { 
var value = this.value.toLowerCase().trim(); 

$("table tr").each(function (index) { 
    if (!index) return; 
    $(this).find("td").each(function() { 
     var id = $(this).text().toLowerCase().trim(); 
     var not_found = (id.indexOf(value) == -1); 
     $(this).closest('tr').toggle(!not_found); 
     return not_found; 
    }); 
});

사진 :

출처

2016-11-21 14:40:58

답변

관련 문제