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

Question

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

}

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

Answer 1

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

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