可编辑表格的实现

news/2024/7/7 20:36:02

表格是网站中最常见的数据表现形式之一，不过大部分表格里数据都是从后台获取后直接展示的。本文将介绍可编辑表格的实现。

自适应宽高的多行输入

多行输入最常用的标签就是textarea，textarea正常使用的话是固定宽高的，内容超出的情况下默认是使用滚动条来处理的，不能实现自适应宽高的多行输入。

下面提供了两种方法来实现自适应宽高的多行输入：

contenteditable属性

使用HTML5 contenteditable属性可以快速实现自适应宽高的多行输入，虽然它是HTML5的内容，但是兼容性较好，ie也能支持

<div class="editable" contenteditable="true"></div>
复制代码

.editable {display: inline-block;min-width: 200px;max-width: 400px;min-height: 100px;
}
复制代码

textarea + div

HTML就是外层一个容器元素，里面有div和textarea两个子元素。

实现原理是当我们在textarea中输入文本的同时一起顺带填充div子元素里的文本内容，让子div元素的宽高自适应，同时父容器div也会随之撑开，因为子textarea元素是绝对定位、宽高100%的，所以父容器高度增减后，textarea的宽度高度也会随之一同增减。

<div class="textarea-wrapper"><div class="content-editable"></div><textarea class="field-textarea"></textarea>
</div>
复制代码

.textarea-wrapper {position: relative;.content-editable {position: relative;z-index: -1;opacity: 0;display: block;}.field-textarea {position: absolute;top: 0;left: 0;width: 100%;height: 100%;resize: none;}
}
复制代码

var $content = $('.content-editable')
$('.field-textarea').on('input', function(){$content.text(this.value)
})
复制代码

在线例子

表格

table标签

从语义化来说， table 就是表格，所有表格类型的数据，都可以table结构来完成

<table><tr><td>1,1</td><td>1,2</td><td>1,3</td></tr><tr><td>2,1</td><td>2,2</td><td>2,3</td></tr>
</table>
复制代码

div + css

div + css特点是布局灵活、改动方便，用它也可以快速完成表格的布局。

<div class="table"><ul class="row"><li class="cell">1,1</li><li class="cell">1,2</li><li class="cell">1,3</li></ul><ul class="row"><li class="cell">2,1</li><li class="cell">2,2</li><li class="cell">2,3</li></ul>
</div>
复制代码