如何讓我的動態表格在鼠標點擊時滾動？

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

如何讓我的動態表格在鼠標點擊時滾動？

回答

相關問題