JavaScript-table in textara 收集表格输入如何实现?

Question

<textarea>中并没有table 属性,因此,在textarea中输入输出table就很麻烦.
想在textarea中结构化输入,想到了用表格形式输入,然后存入数组,一个textarea对应一个字段,不是一个单元格对应一个字段.一些富文本编辑器能实现,就是功有些冗余.
参考:
几个在线表格项目
yii

还没有想出好办法.一个缺少的html属性需要一大堆代码去实现这个功能,很期待html6有<textareas table=(3,3)>或者<textarea htmltag="true">

Answer 1

如果只是输入表格，不混合输入其他东西，可以直接用表格（<table><tr><td>...）来表示输入格式，加上contenteditable属性，就能直接修改。

<table>
<thead>
<tr>
<td>#</td>
<td>Name</td>
<td>Age</td>
</tr>
</thead>
<tbody contenteditable='true'>
<tr>
<td>1</td>
<td>Mike</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>Jack</td>
<td>21</td>
</tr>
<tr>
<td>3</td>
<td>Cirno</td>
<td>9</td>
</tr>
</tbody>
</table>

<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid grey;
padding: 10px;
}
</style>

在Firefox下的效果:

也可以用JS控制每个<td>是否可编辑（例如点击后可编辑，回车退出编辑）。