vertikale Bildlaufleiste basierend auf der Anzahl der Zeilen.js jquery

Question

Ich habe eine dynamische Tabelle, in der Zeilen und Tabellen dynamisch erstellt werden. Ich habe eine Bildlaufleiste, die mit CSS eingestellt ist. Ich habe versucht, Bildlaufleiste anzuzeigen, wenn Zeile> 2 mit js, aber es hat nicht funktioniert. Ich möchte die Bildlaufleiste anzeigen, wenn die Zeile größer als 2 ist. Bitte leiten Sie mich dazu, dies zu erreichen. Für weitere Informationen schauen Sie sich den folgenden Code an (der Code hat 2 Tabellen nur für Test). Jede Hilfe wird sehr geschätzt

werden

//i want to display scroll bar based on number of rows if row >2 then display the scroll bar 
 

 
//this is how i am adding row in my table 
 

 
if ($('#testbody2 >tr').length > 2){ 
 
\t \t $('#testbody2').css('overflow-y', 'visible');}

.table1 th{ 
 
\t border:2px solid black; 
 

 
} 
 

 
.table1 tbody{ 
 
\t display:inline-block; 
 
\t 
 
\t max-height: 80px;  
 
    overflow-y: auto; 
 
} 
 

 
.table2 tbody{ 
 
\t display:block; 
 
\t 
 
\t height: 25px;  
 
    overflow-y: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3>my first table</h3> 
 
<div> 
 
<table class="table1"> 
 
<thead> 
 
<tr>test1</tr> 
 
</thead> 
 

 

 
<tbody id="testbody"> 
 
<tr><td>test</td></tr> 
 
<tr><td>test</td> 
 
</tr><tr> 
 
<td>test</td></tr> 
 

 
</tbody> 
 
</table> 
 

 
</div> 
 

 

 
<h3>my second table</h3> 
 
<div> 
 
<table class="table2"> 
 
<thead> 
 
<tr>test3</tr> 
 
</thead> 
 

 

 
<tbody id="testbody2"> 
 
<tr><td>test</td></tr> 
 
<tr><td>test</td></tr> 
 
</tr><td>testing</td></tr> 
 
<tr><td>testing</td><tr> 
 

 
<td>test</td></tr> 
 

 
</tbody> 
 
</table> 
 

 
</div>

Answer 1

In Ihrem kommentierten Code Sie die # fehlt eine ID zu wählen. Dies sollte funktionieren.

if ($('#testbody > tr').length > 2) 
    $('#testbody').css('overflow-y', 'scroll'); 

Answer 2

Sie müssen die Höhe des übergeordneten div eingestellt und wenn Zeilen Überlauf sind dann arbeitete CSS

.table1 th{ 
     border:2px solid black; 

    } 

    .table1 tbody{ 
     display:inline-block; 

     max-height: 80px;  

    } 

    #tb{ 
     display:block; 

     height: 100px;  
     overflow-y: auto; 
    } 


    #tb2{ 
     display:block; 

     height: 100px;  
     overflow-y: auto; 
    } 



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <h3>my first table</h3> 
    <div id="tb"> 
    <table class="table1"> 
    <thead> 
    <tr>test1</tr> 
    </thead> 


    <tbody id="testbody"> 
    <tr><td>test</td></tr> 
    <tr><td>test</td> 
    </tr><tr> 
    <td>test</td></tr> 

    </tbody> 
    </table> 

    </div> 


    <h3>my second table</h3> 
    <div id="tb2"> 
    <table class="table2"> 
    <thead> 
    <tr>test3</tr> 
    </thead> 


    <tbody id="testbody2"> 
    <tr><td>test</td></tr> 
    <tr><td>test</td></tr> 
    </tr><td>testing</td></tr> 
    <tr><td>testing</td><tr> 

    <td>test</td></tr> 

    </tbody> 
    </table> 

    </div> 

<!-- end snippet -->