表格数据的增删改

html代码：

  <button id="btn">根据年龄排序</button>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>职业</th>
                <th>简介</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody class="tbody">
            <!-- <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr> -->
        </tbody>
    </table>

js代码：

创建对象模拟一段json对象，进行数据的操作

var table = (function () {
    return {
        init(json) {
            this.json = json;
            this.$tbody = document.querySelector('.tbody');
            this.$btn = document.querySelector('#btn');
            this.event();
            this.insertData(json);
        },
        event() {
            var _this = this;
            _this.$btn.onclick = function () {
                _this.json.sort(function (c, d) {
                    return c.age - d.age;
                })
                _this.insertData(_this.json);
            }
            _this.$tbody.onclick = function (e) {
                e = e || window.event;
                var target = e.target || e.srcElement;
                if (target.nodeName == 'BUTTON') {
                    // 获取当前tr
                    var $tr = target.parentNode.parentNode;
                    switch (target.className) {
                        case 'btn-del':
                            $tr.remove();
                            // console.log('删除');
                            break;
                        case 'btn-edit':
                            // console.log('修改');
                            // 变成确定按钮
                            target.innerHTML = '确定';
                            target.className = 'btn-success';
                            // 获取当前行的td, 不包含操作栏
                            var $tdAll = $tr.children;
                            for(var i = 0; i < $tdAll.length - 1; i++) {
                                // 获取文本节点
                                var text = $tdAll[i].firstChild;
                                console.log(text);
                                var $textArea = document.createElement('textarea');
                                $textArea.value = text.nodeValue;
                                $tdAll[i].replaceChild($textArea, text);

                                // $tdAll[i].appendChild($textArea);
                            }
                            break;
                        case 'btn-success':
                            target.innerHTML = '修改';
                            target.className = 'btn-edit';
                            var $tdAll = $tr.children;
                            for(var i = 0; i < $tdAll.length - 1; i++) {
                                var text = $tdAll[i].querySelector('textarea').value;
                                $tdAll[i].innerHTML = text;
                            }
                            break;
                        case 'btn-add':
                                var oneData = {
                                    ..._this.json[$tr.index]
                                };
                                _this.json.splice($tr.index, 0, oneData);
                                _this.insertData(_this.json);
                            
                          
                            break;
                    }
                }
            }

        },
        // 生成表格
        insertData(json) {
            this.$tbody.innerHTML = '';
            var frag = document.createDocumentFragment();
            // 每一条数据对应一个tr
            for (var i = 0; i < json.length; i++) {
                // 创建tr
                var $tr = document.createElement('tr');
                $tr.index = i;
                for (var j in json[i]) {
                    // 创建tr中的td
                    var $td = document.createElement('td');
                    // 创建td中的文本内容
                    var $text = document.createTextNode(json[i][j]);
                    // 把文本内容放进td中
                    $td.appendChild($text);
                    // 把td放到tr中
                    $tr.appendChild($td);
                }
                $td = document.createElement('td');
                $td.innerHTML = `<button class="btn-del">删除</button>
                                 <button class="btn-add">添加</button>
                                 <button class="btn-edit">修改</button>`;

                $tr.appendChild($td);
                // 把tr先放入到文档碎片中
                frag.appendChild($tr);
                // 把tr放到tbody里面
                // $tbody.appendChild($tr);
            }
            this.$tbody.appendChild(frag);
        }
    }
}())

效果图：