Javascript 基于行数的垂直滚动条。js jquery

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

//我想根据行数显示滚动条，如果行数>2，则显示滚动条
//这就是我在表中添加行的方式
如果（$（'#testbody2>tr'）。长度>2）{
$（'testbody2'）.css（'overflow-y'，'visible'）；}

。表1{
边框：2件纯黑；
}
.表1 t车身{
显示：内联块；
最大高度：80px；
溢出y：自动；
}
.表2 t车身{
显示：块；
高度：25px；
溢出y：隐藏；
}

我的第一张桌子
测试1
测试
测试
测试
我的第二张桌子
测试3
测试
测试
测试
测试
测试

在您的注释代码中，您缺少选择id的#。 这应该行得通

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

---

在注释代码中，您缺少选择id的#。 这应该行得通

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

---

您需要设置父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 -->

。表1{
边框：2件纯黑；
}
.表1 t车身{
显示：内联块；
最大高度：80px；
}
#结核病{
显示：块；
高度：100px；
溢出y：自动；
}
#tb2{
显示：块；
高度：100px；
溢出y：自动；
}
我的第一张桌子
测试1
测试
测试
测试
我的第二张桌子
测试3
测试
测试
测试
测试
测试

您需要设置父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 -->

。表1{
边框：2件纯黑；
}
.表1 t车身{
显示：内联块；
最大高度：80px；
}
#结核病{
显示：块；
高度：100px；
溢出y：自动；
}
#tb2{
显示：块；
高度：100px；
溢出y：自动；
}
我的第一张桌子
测试1
测试
测试
测试
我的第二张桌子
测试3
测试
测试
测试
测试
测试

您需要设置overflow-y:hidden；在css中，您还需要设置元素的高度。我不想设置高度，是否可以不设置高度，仅按行数进行设置？因此，如果有两行以上的行，您希望显示滚动条，可滚动区域的高度是多少？要么你允许它是所有项目的高度，这意味着没有滚动条，要么你将它设置为允许滚动条显示Luke我完全按照你所说的高度做了：100px和scroll-y隐藏在css中，我使用了与你完全相同的代码，但滚动条现在不可见。plss帮助您所有3个tr元素的高度都小于100px，那么您可以尝试一些更小的东西，比如25px，您需要设置overflow-y:hidden；在css中，您还需要设置元素的高度。我不想设置高度，是否可以不设置高度，仅按行数进行设置？因此，如果有两行以上的行，您希望显示滚动条，可滚动区域的高度是多少？要么你允许它是所有项目的高度，这意味着没有滚动条，要么你将它设置为允许滚动条显示Luke我完全按照你所说的高度做了：100px和scroll-y隐藏在css中，我使用了与你完全相同的代码，但滚动条现在不可见。plss帮助您所有3个tr元件的高度都小于100px，那么您试试更小的，比如25px，怎么样