>

동적으로 생성 된 테이블이 포함 된 페이지가 있습니다. DB에 저장된이 테이블의 ID는 페이지의 선택 목록 값과 일치 할 수 있습니다.

모든 테이블은 기본적으로 숨겨져 있습니다.

선택한 옵션 값을 기준으로 테이블을 표시하거나 숨기고 싶습니다. 선택한 옵션 값과 일치하는 ID를 가진 테이블을 표시하고 일치하지 않는 다른 테이블을 숨 깁니다.

아래 코드는 일치하는 테이블을 보여주기 위해 작동합니다. 그러나 선택한 옵션과 일치하지 않는 경우 표를 숨기려면 어떻게합니까?

$('#unit_table').hide();
$('#program_levels').change(function(){
            if($("#" + this.value + "_table").is(":hidden")){
                $("#" + this.value + "_table").show();
            } else {
            }
            });

  • 답변 # 1

    속성이 select 인 end를 사용하여 id가 _table 인 모든 일치하지 않는 테이블을 숨길 수 있습니다. 아래 코드를 참조하십시오

    JQuery가 속성 선택기 API로 끝남

    $('#unit_table').hide();
    $('#program_levels').change(function(){
        //hide all tables 
        $("table[id$='_table'").hide();
        //show all matching tables only
        //if($("#" + this.value + "_table").is(":hidden")){ // if condition not required
             $("#" + this.value + "_table").show();
        //} 
     });
    
    

  • 답변 # 2

    이 또한 시도 할 수 있습니다.

    $(document).ready(function(){
       $(".jsTable tr").hide();
       $(".jsSelect").change(function(){
         var oVal = $(this).val();
          $(".jsTable tr").hide();
         if(oVal!="")
         {
          $(".jsTable tr[id="+oVal+"]").show();
         }
       })
    })
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <html>
    <body>
    <h2>Show hide</h2>
    <select class="jsSelect">
      <option value="">Select</option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
    </select>
    <br/>
    <table class="jsTable"> 
      <tr id="A">
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
     <tr id="B">
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
     <tr id="C">
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
      </tr>
      <tr id="D">
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
      </tr>  
    </table>
    </body>
    </html>
    
    

  • 답변 # 3

    if ($("#someid").attr("sometable") === "something") {
                    // code
                }
    
    

  • 답변 # 4

    여기 표 숨기기 및 표시 예

    $(document).ready(function(){
       $(".jsTable").hide();
       $(".jsSelect").change(function(){
         var oVal = $(this).val();
          $(".jsTable").hide();
         if(oVal!="")
         {
          $(".jsTable[id="+oVal+"]").show();
         }
       })
    })
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <html>
    <body>
    <h2>Show hide</h2>
    <select class="jsSelect">
      <option value="">Select</option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
    </select>
    <br/>
    <table class="jsTable" id="A"> 
      <tr id="A">
        <td>A Table</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr> 
    </table>
    <table class="jsTable" id="B">
    <tr id="B">
        <td>B Table</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr> 
    </table>
    <table class="jsTable" id="C">
    <tr id="C">
        <td>C Table</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
      </tr>  
    </table>
    <table class="jsTable" id="D">
    <tr id="D">
        <td>D Table</td>
        <td>Helen Bennett</td>
        <td>UK</td>
      </tr>  
    </table>
    </body>
    </html>
    
    

관련 자료

  • 이전 aws lambda - 상태 시스템에서 리소스 ARN (Amazon 리소스 이름)을 지정하는 방법
  • 다음 c++ - c/cpp의 경우 시스템 파일에 경로를 추가하고 경로를 추가하여 경로 포함