可编辑表格的实现

晓得迷路了
5,312 阅读3分钟

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

自适应宽高的多行输入

多行输入最常用的标签就是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>

在线例子

可编辑的表格

利用上述制作的表格和自适应宽高的多行输入方式即可做出可编辑的表格。

table + contenteditable

用table结构做出的可编辑表格具备了table布局的自适应能力，当你在某一个单元格输入的时候行列会自动对齐。

不足之处是table的自适应能力可能不符合我们需求，而它的自适应能力又难以修改。

div + css + contenteditable

用div + css结构做出的可编辑表格布局需要js的配合，这样就需要花时间处理表格布局交互，但是相对的表格的布局交互是可控的。

在线例子

总结

上面可编辑的表格实现是最基础的，要想实现一个完整的可编辑表格功能，比如在线excel，还是要考虑到很多问题的，不过可以参考一些已有的在线excel例子。

avatar
文章
阅读
粉丝