HTML+JS 创建 自定义可编辑表格

　　可编辑表格主要分为数据的新增编辑保存和数据查询回显。

　　新增保存 可以把表格各个填写的数据存放到一个字段中，类似与JSON，需要时再遍历出来，遍历时本文用的JS来做，暂时不考虑性能问题。

//这是数据的格式，一般都是二维的数据 表格中input没有填写的为空串
[["某某某","某某某","某某某"],["某某某","某某某","某某某"],["","",""],["","",""],["","",""]]

//可编辑div
contenteditable="plaintext-only"

　　以下是HTML 的 自定义TABLE（可以做到不要表头，从后端传递表头 效果，不过要改一改代码）

                        <tr valign="bottom" class="postFormBox">
                            <td valign="top"><span class="name">风险核***单<font color="red">*</font>:</span></td>
                            <td colspan="7" valign="middle" style="padding:10px;">
                                <table class="table table-bordered ">
                                    <tr class="info">
                                        <td width="5%" rowspan="2" style="text-align: center;vertical-align: middle">
                                            序号
                                        </td>
                                        <td width="10%" colspan="2" style="text-align: center;vertical-align: middle">
                                            风险**
                                        </td>
                                        <td width="70%" colspan="6" style="text-align: center;vertical-align: middle">
                                            评估**
                                        </td>
                                        <td width="10%" colspan="2" style="text-align: center;vertical-align: middle">
                                            应对*略
                                        </td>
                                        <td width="10%" colspan="2" rowspan="2"
                                            style="text-align: center;vertical-align: middle">
                                            操作
                                        </td>
                                    </tr>
                                    <tr class="info">
                                        <td width="9%" style="text-align: center;vertical-align: middle">风险**</td>
                                        <td width="9%" style="text-align: center;vertical-align: middle">风**容</td>
                                        <td width="9%" style="text-align: center;vertical-align: middle">可能**</td>
                                        <td width="9%" style="text-align: center;vertical-align: middle">对成本***</td>
                                        <td width="9%" style="text-align: center;vertical-align: middle">对进度**</td>
                                        <td width="9%" style="text-align: center;vertical-align: middle">对范围**</td>
                                        <td width="9%" style="text-align: center;vertical-align: middle">风险影**</td>
                                        <td width="9%" style="text-align: center;vertical-align: middle">风险**</td>
                                        <td width="9%" style="text-align: center;vertical-align: middle">策略**</td>
                                        <td width="9%" style="text-align: center;vertical-align: middle">应对**</td>
                                    </tr>
                                    <tbody id="check">
                                        <tr>
                                            <td contenteditable="plaintext-only">1</td>
                                            <td contenteditable="plaintext-only"></td>
                                            <td contenteditable="plaintext-only"></td>

                                            <td contenteditable="plaintext-only"></td>
                                            <td contenteditable="plaintext-only"></td>
                                            <td contenteditable="plaintext-only"></td>

                                            <td contenteditable="plaintext-only"></td>
                                            <td contenteditable="plaintext-only"></td>
                                            <td contenteditable="plaintext-only"></td>

                                            <td contenteditable="plaintext-only"></td>
                                            <td contenteditable="plaintext-only"></td>
                                            <td><a onclick="delRow(this, 'check')">删除</a></td>
                                        </tr>
                                        <tr>
                                            <td colspan="14" align="center">
                                                <a id="checkListAdd" onclick="addRow(this, 10,'check')">增加</a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <input id="riskChecklist" name="riskChecklist" hidden="hidden">
                            </td>
                        </tr>

 　　添加和删除表格行方法

　　//添加行函数 item为节点，n为列，id为表格id tbody id="check"

　　function addRow(item, n, id) {
        var oe = document.getElementById(id);
        var len = oe.rows.length;
        var tr = "<tr><td contenteditable='plaintext-only'>"+len+"</td>";
        for (var i = 0; i < n; i++) {
            tr += "<td contenteditable='plaintext-only'></td>";
        }
        tr += "<td><a onclick=" + "\"delRow(this, '" + id + "')\">删除</a></td></tr>";
        $(item).parent().parent().before(tr);
    }
　　//控制最低要填写几行数据
    function delRow(item, id) {
        var oe = document.getElementById(id);
        var len = oe.rows.length;if (id == 'check') {
            if (len > 2) {
                $(item).parent().parent().remove();
            } else {
                showMsg("删除失败，****至少需要一条记录!");
            }
        }
    }

 　　JS数据组装

    //js数据组装 将table中的数据组装为一个字段
    function JoinCheck() {
        var check = document.getElementById("check");
        var data = [];
        for (var i = 0, rows = check.rows.length; i < rows; i++) {
            for (var j = 0, cells = check.rows[i].cells.length - 1; j < cells; j++) {
                if (!data[i]) {
                    data[i] = new Array();
                }
                if(check.rows[i].cells[j].innerHTML == null || check.rows[i].cells[j].innerHTML==''){
                    showMsg("请输入风险核对清单，不能为空!");
                    return false;
                }
                data[i][j] = check.rows[i].cells[j].innerHTML;
            }
        }
        var checkExcel = JSON.stringify(data);
        document.getElementById("riskChecklist").value = checkExcel;
        return true;
    }

 　　JS数据回显

   function initRegisterTables() {
        var registerInterested = document.getElementById("registerInterested").value;

        var obj = eval(registerInterested);
        for (var i =0; i < obj.length; i++) {
            initRow($("#registerListAdd"), 11, obj[i], 'register');
        }
    }
　　function initRow(item, n, obj, id) {
    　　var tr = "<tr>";
    　　for (var i = 0; i < n+1; i++) {
       　　 tr += "<td contenteditable='plaintext-only'>"+obj[i]+"</td>";
    　　}
    　　tr += "<td><a onclick=" + "\"delRow(this, '" + id + "')\">删除</a></td></tr>";
    　　$(item).parent().parent().before(tr);
　　}

 　　JS主要作用就是遍历二维的数组，组装和拆分数据，拼接html。下边就是做出来的样式。