单击鼠标时如何使我的动态表可滚动？答案

【问题标题】：How to make my dynamic table scrollable when mouse clicked?单击鼠标时如何使我的动态表可滚动？
【发布时间】：2011-09-21 20:20:41
【问题描述】：

我有一个 html 表格：

<table id="my-table" class="my-table">

        <tr class="head">                                
               <th class="name">Name:</th>
               <th class="age">Age:</th>
        </tr>

        <tr class="row">
               <td class="name">John</td>
               <td class="age">19</td>
        </tr class="row">

    <tr class="row">
               <td class="name">Kate</td>
               <td class="age">16</td>
        </tr>
       ...
       ...

  </table>

表格可以有几行适合 100 像素高度的区域。

然后，我定义了一个鼠标点击事件，即当鼠标点击每一行的名称列时，点击的行后面会附加一些内容：

function addContent(evt){
   $('.row').after("<tr>"+SOME_CONTENT+"</tr>");
}

$(".name").click(addContent);

它有效，并且上面的点击事件可以使表格更长，因为如果鼠标点击，额外的内容行会附加在每一行之后。

我的问题是，当鼠标单击“名称”列时，如何使表格可滚动（滚动条）？（默认情况下，不可滚动，仅当鼠标单击“名称”时触发附加内容，然后使其可滚动），因此表格区域始终具有固定高度 100 px。

我在 CSS 中尝试过：

.my-table{  
 overflow:scroll;
 height: 100px;
 width: 600px;
 overflow:auto;

}

但它不起作用......

【问题讨论】：

标签： javascript jquery jquery-selectors css

【解决方案1】：

table 元素不会溢出，但您可以在表格周围使用包装器并将您的 css 添加到其中：

http://jsfiddle.net/2ezdx/1/

【讨论】：

您好，是否也可以自定义右侧滚动条的高度，因为表格区域上方有一小部分滚动条。
您可以尝试使用 (line-)height 进行一些调整，或者将包装器的显示置于 inline-block 中；

【解决方案2】：

使用 Jquery，您可以添加

$(".my-table").css('overflow','hidden')

当您希望它可滚动时（使用 javascript 事件）

$(".my-table").css('overflow','scroll')

【讨论】：