如何让我的动态表格在鼠标点击时滚动？

我有一个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>

表可以拥有适合100px的高度区域几行。

然后，我定义了一个鼠标点击事件，这时候每行的名字栏点击鼠标，就会有点击一行之后，一些内容被追加：

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

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

它的工作原理和上面的点击事件可能使表更长，因为额外的内容行被添加在每行后面，如果点击鼠标。

我的问题是，当鼠标点击“名称”列时如何使表可滚动（滚动条）？（这是默认情况下，不滚动，只有当鼠标点击“名称”触发额外的内容追加，然后使其可滚动），以便表区域总是固定高度100像素。

我试着在CSS：

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

}

，但它不工作...

来源

2011-09-21 Leem

table元素不溢出，但你可以使用围绕表的包装和你的CSS添加到：

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

来源

2011-09-21 12:20:41

酷，谢谢。 – Leem

嗨，是否可以自定义右侧滚动条的高度，因为表格区域上方有一小部分滚动条。 – Leem

你可以尝试用（线）高度稍微调整一下，或者把包装的显示放入内嵌块中; –

使用jQuery，您可以添加

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

，当你希望它是滚动（用javascript事件）

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

来源

2011-09-21 12:20:22 Fredy31

如何让我的动态表格在鼠标点击时滚动？

回答

相关问题