可编辑表格的实现

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

自适应宽高的多行输入

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