如何使我的动态表滚动时，鼠标单击

How to make my dynamic table scrollable when mouse clicked?

本文关键字：鼠标 单击 滚动 何使 我的 动态      更新时间：2023-09-26

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

它可以工作，并且上面的单击事件可以使表更长，因为如果鼠标单击，则在每行之后附加额外的内容行。

我的问题是，如何使表可滚动(滚动条)，当鼠标单击"名称"列?(这是默认情况下，不可滚动，只有当鼠标点击"name"触发额外的内容追加，然后使其可滚动)，使表格区域始终具有固定的高度100像素。

我试过在CSS:

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

table元素不会溢出，但是您可以在表周围使用包装器并添加css:

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

使用Jquery，您可以添加

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

和当你想要它是可滚动的(与javascript事件)

$(".my-table").css('overflow','scroll')
相关文章：