如何擴大/減少表格單元格的高度？

Question

有一個Jsfiddle，我有一個填充表單元格的文本區域。 但是我需要幫助的是，有人可以在提琴中創建一個函數，供用戶擴展或減小表單元格的大小。 我想測試我的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;

}

更新：

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

請檢查此小提琴 ，是否可以解決您的問題。

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);
 });