基於rows.js的垂直滾動條jquery

我有一個動態表，其中行和表是動態創建的。我有一個使用CSS設置的滾動條。我試圖顯示滾動條時，使用js行> 2，但它沒有工作。如果行大於2，我想顯示滾動條，請指導我實現此目的。有關更多信息，請查看下面的代碼（代碼中有2個表僅供測試）。任何幫助將不勝感激基於rows.js的垂直滾動條jquery

//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>

來源

2017-06-18 david

在你的註釋代碼你缺少＃選擇一個ID。這應該工作。

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

來源

2017-06-19 00:48:05

盧克它並沒有奏效。 – david

您需要設置overflow-y：hidden;在你的CSS中，你還需要在元素上設置一個高度。 –

我不想設置高度，反正有沒有設置高度，只需按行數呢？ – david

你需要設置父div的高度，當行是溢出然後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 -->

來源

2017-06-19 01:52:08

thx nerraj你的代碼也是完美的。 – david

基於rows.js的垂直滾動條jquery

回答

相關問題