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。下邊就是做出來的樣式。