如何使我的动态表格在鼠标单击时可滚动？
我有一个 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 px。
我在 CSS 中尝试过：
.my-table{
overflow:scroll;
height: 100px;
width: 600px;
overflow:auto;
}
但它不起作用......
I have a html table:
<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>
The table can have several rows which fits 100px height area.
Then, I defined a mouse click event, that's when mouse click on each row's name column, there will be some content be appended after the clicked row:
function addContent(evt){
$('.row').after("<tr>"+SOME_CONTENT+"</tr>");
}
$(".name").click(addContent);
It works and the above click event could make the table much longer, since extra content row are appended after each row if mouse clicked.
My Question is, how to make the table scrollable (scroll bar) when mouse clicked on the "name" column? (That's by default, not scrollable, only when mouse clicked on "name" which triggered extra content appended, then makes it scrollable), so that the table area has the fixed height 100 px always.
I tried in CSS:
.my-table{
overflow:scroll;
height: 100px;
width: 600px;
overflow:auto;
}
but it does not work...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
table元素不会溢出，但您可以使用表格周围的包装器并将 CSS 添加到其中：http://jsfiddle.net/2ezdx/1/
tableelements don't overflow, but you could use a wrapper surrounding the table and add your css to that:http://jsfiddle.net/2ezdx/1/
使用 Jquery，您可以添加
和 当您希望它可滚动时（使用 javascript 事件）
With Jquery, you could add
and when you want it to be scrollable (with a javascript event)