javascript - 基于行数的垂直滚动条.js jquery

Question

我有一个动态表，其中行和表是动态创建的。我有一个使用 css 设置的滚动条。我试图使用 js 在 row > 2 时显示滚动条，但它不起作用。如果行大于 2，我想显示滚动条，请指导我实现此目的。有关更多信息，请查看下面的代码(代码有 2 个表仅用于测试)。任何帮助将不胜感激

//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){
		$('#testbody2').css('overflow-y', 'visible');}

.table1  th{
	border:2px solid black;

}

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

.table2 tbody{
	display:block;
	
	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

在您的注释代码中，您缺少选择 ID 的 #。 这应该可行。

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