表格資料的增刪改
阿新 • • 發佈:2018-11-10
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); } } }())
效果圖: