[英]How to expand/decrease height of table cell?
有一个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%
}
请检查此小提琴 ,是否可以解决您的问题。
var cell = $('td.question');
$('.increase').click(function(){
cell.height(cell.height()+20);
});
$('.decrease').click(function(){
cell.height(cell.height()-20);
});
这是一个例子,我认为它可以帮助您
单击按钮,当我们更改高度和宽度时,可以看到文本区域填充了表格单元格。
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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.