以HTML格式向下滑动textarea

Question

我想制作一个包含大量文本输入区域的HTML表格(textarea),当点击时,向下展开.现在,当textarea元素被点击时,它会很好地扩展,但它会在这个过程中弄乱表格布局.

我想要这样的东西

而不是我现在得到的这个丑陋的东西

这是我目前的代码

Answer 1

只需切换一个类,而不是手动搞乱CSS值.这使您可以轻松玩绝对定位而无需搞乱JS.请参阅此处的演示:http://jsfiddle.net/8Qa3C/1/

而不是您当前的代码,使用:

$(document).ready(function() {
    $('[id^="txt"]').focus(function() {
        $(this).addClass('expand');
    });
    $('[id^="txt"]').blur(function() {
        $(this).removeClass('expand');
    });
});

然后你可以有一些像这样的简单CSS:

.expand {
    box-shadow: 3px 3px 5px 2px gray;
    height: 150px;
    position: absolute;
    top: 5px;
    z-index: 10;
}

我还添加了一个position: relative;到td.