可編輯表格的實現

表格是網站中最多見的數據表現形式之一，不過大部分表格裏數據都是從後臺獲取後直接展現的。本文將介紹可編輯表格的實現。

自適應寬高的多行輸入

多行輸入最經常使用的標籤就是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例子。