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);
        }
    }
}())
 

效果圖：