如何展開/減少表格單元的高度？

Question

有一個Jsfiddle，我有一個textarea填充表格單元格。但是我需要幫助的是，有人可以在用戶擴展或減小表格單元大小的小提琴中創建一個功能。如果表格單元高度增加或減少，我想測試我的CSS以查看textarea是否可以填充textarea？

這裏是小提琴：http://jsfiddle.net/BpWes/1/

下面是小提琴代碼：

HTML：

 <table id="tbl"> 
     <tr> 
     <th>Question</th> 
     </tr> 
     <tr> 
     <td class="question"> 
     <textarea class="textAreaQuestion" id="mainTextarea" name="questionText"></textarea> 
      </td> 
     </tr> 
     </table> 

的Jquery：

$('textarea').css('background','#EAEAEA'); 

CSS：

td{ vertical-align:top} 


#tbl{ 
border:1; 
height:250px;  
} 

.question{  
    border:1px black solid; 
    padding: 0; 
    height:100% 
} 

.textAreaQuestion{ 
    width:100%; 

    height:100%; 
    border:0; 
    padding:0; 
    font-size:100%; 

    margin:0; 

} 

UPDATE：

HTML：

<table id="tbl"> 
     <tr> 
     <th>Question</th> 
     </tr> 
     <tr> 
      <td class="question"> 
<div class="divheight"> 
    <textarea class="textAreaQuestion" id="mainTextarea" name="questionText"></textarea> 
       </div> 
      </td> 
     </tr> 
     </table>  

CSS：

.question{  

     border:1px black solid; 
     padding: 0; 
    } 

    .divheight{ 
    height:100% 
    } 

Answer 1

請檢查該fiddle，是否可以解決你的問題。

var cell = $('td.question'); 

$('.increase').click(function(){ 
    cell.height(cell.height()+20); 
}); 
$('.decrease').click(function(){ 
    cell.height(cell.height()-20); 
}); 

Answer 2

這裏有一個例子，我認爲它可以幫助你

http://jsfiddle.net/BpWes/37/

單擊按鈕，當我們改變高度和寬度時，可以看到文本區域填充表格單元格。

HTML

<table id="tbl"> 
     <tr> 
     <th>Question</th> 
     </tr> 
     <tr> 
     <td class="question"> 
     <textarea class="textAreaQuestion" id="mainTextarea" name="questionText"></textarea> 
      </td> 
     </tr> 
     </table> 
<input type ="button" value="expand" id ="expand"/> 

jQuery的

$('textarea').css('background','#EAEAEA'); 

$("#expand").click(function(){  
$(".question").height(500); 
$(".question").width(500); 
});