Css+JS模擬實現可編輯的表格

表格在未編輯狀態和編輯狀態，需要定義兩個不同的樣式。

比如未編輯狀態是lable的樣式，兩邊有兩個括號[]，表示該表格可以編輯；編輯中的表格則表示成一個input框，可以輸入。

基本思路就是，在表格中直接放可輸入的input標簽，在未編輯的時候，利用css樣式，把input標簽模擬成不可編輯的lable樣式。

實現代碼。

CSS

        .edit-marker {
            position: relative;
        }

            .edit-marker:before {
                position: absolute;
                content: '[';
                top: 0px;
                left: 2px;
            }

            .edit-marker:after {
                position: absolute;
                content: ']';
                top: 0px;
                right: 2px;
            }

            .edit-marker input,
            .edit-marker select {
                border-color: transparent;
                box-shadow: none;
            }

                .edit-marker select.input-time {
                    -moz-appearance: none;
                    -webkit-appearance: none;
                    padding-left: 18px;
                }

                    .edit-marker select.input-time::-ms-expand {
                        display: none;
                    }

JS

    <script>
       $(function(){
        // 移除樣式用的JS
        $(".edit-marker input, .edit-marker select").on("focus",function(){
            $(this).closest(".edit-marker").attr("marker-container", true).removeClass("edit-marker");
        }).on("blur",function(){
           $(this).closest("[marker-container]").addClass("edit-marker").removeAttr("marker-container");
        });

       });
    </script>

HTML

 <table id="table" class="table table-bordered table-condensed">
            <thead>
                <tr>
                    <th>ID</th>
                    <th><span>Name</span></th>
                </tr>
            </thead>
            <tbody>

                <tr>
                    <td>input(td)</td>
                    <td class="edit-marker">
                        <input type="text" class="form-control" value="wang" />
                    </td>
                </tr>
                <tr>
                    <td>select(td)</td>
                    <td class="edit-marker">
                        <select class="form-control input-sm input-time ">
                            <option value="1">00:00</option>
                            <option value="2">00:10</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>select2(td)</td>
                    <td class="edit-marker">
                        <select class="form-control input-sm kyumucombo">
                            <option value=""></option>
                            <option value="0901">Item1</option>
                            <option value="0902">Item2</option>
                            <option value="0903">Item3</option>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>

※上面用到了bootstrap。使用上，只需在外圍的容器（td，div都可以）上加上edit-marker類就行。

實現的效果如下

未編輯狀態：

編輯狀態：

3.1 普通輸入框

3.2 下拉框（初期表示：沒有下拉箭頭，看起來完全和lable一樣）

   

3.3 下拉框