原生JS操作table表格:修改表格内容,添加删除行、列,获取表格数据
demo源码下载:点击下载
index.html页面内容:
<script src="./xmsbTable.js" type="text/javascript" charset="utf-8"></script> <!-- <div id="table"></div> --> 点击单元格编辑内容: <table id="table" border="1" cellspacing="0" cellpadding="5" height="100"> <tr> <th width="100">A</th> <th width="100">A</th> <th width="100">A</th> </tr> <tr> <td>xmsb</td> <td>xmsb</td> <td>xmsb</td> </tr> <tr> <td>xmsb</td> <td>xmsb</td> <td style="background:black; color: white;">xmsb</td> </tr> </table> <br> <button onclick="xmsbTable_createRow('table')">添加行</button> <button onclick="xmsbTable_createCol('table')">添加列</button> <br><br> <button onclick="xmsbTable_deleteRow('table', 2)">删除第二行</button> <button onclick="xmsbTable_deleteCol('table', 3)">删除第三列</button> <br><br> <button onclick="console.log(xmsbTable_getTable('table'))">获取表格数据</button> <script type="text/javascript"> xmsbTable_editTable("table"); </script>
xmsbTable.js内容:
/** * xmsbTable.js * Author: 何效名 * Date: 2020-06 */ window.xmsbTable_editTable = function(domId) { var table = document.getElementById(domId); if(!xmsbTable_checkTable(table)) return false; table.editTableInit = true; var tds = table.getElementsByTagName('td'); for(var i = 0; i < tds.length; i ++) { tds[i].onclick = init; } var ths = table.getElementsByTagName('th'); for(var i = 0; i < ths.length; i ++) { ths[i].onclick = init; } function init() { if(!this.classList.contains('editTable-Input')) { var currentStyle = window.getComputedStyle(this); this.style.maxWidth = currentStyle.width; this.classList.add('editTable-Input'); var value = this.innerHTML; var style = "\ color:" + currentStyle.color + "; \ width:" + currentStyle.width + "; \ height:" + currentStyle.height + "; \ font-size:" + currentStyle.fontSize + "; \ border: none; background: none; outline: none;"; var input = "<input type='text' value='"+ value +"' style='" + style + "'>"; this.innerHTML = input; this.children[0].focus(); this.children[0].onblur = function() { var editTd = this.parentNode; editTd.innerHTML = this.value.trim() || ' '; editTd.classList.remove('editTable-Input'); } } } } window.xmsbTable_createRow = function(domId) { var table = document.getElementById(domId); if(!xmsbTable_checkTable(table)) return false; var cols = table.rows[table.rows.length - 1].cells; var newRow = document.createElement("tr"); for(var i = 0; i < cols.length; i ++) { newRow.innerHTML += cols[i].outerHTML; } for(var i = 0; i < newRow.children.length; i ++) { newRow.children[i].innerHTML = ' '; } var parent = cols[0].parentNode.parentNode; parent.appendChild(newRow); if(table.editTableInit == true) { xmsbTable_editTable(domId); } } window.xmsbTable_createCol = function(domId) { var table = document.getElementById(domId); if(!xmsbTable_checkTable(table)) return false; var rows = table.rows; for(var i = 0; i < rows.length; i ++) { var cols = rows[i].children; var newCol = document.createElement(cols[cols.length - 1].tagName); for(var ii = 0; ii < cols[cols.length - 1].attributes.length; ii ++) { newCol.setAttribute(cols[cols.length - 1].attributes[ii].name, cols[cols.length - 1].attributes[ii].value); } for(var ii = 0; ii < cols[cols.length - 1].style.length; ii ++) { newCol.style[ii] = cols[cols.length - 1].style[ii]; } newCol.innerHTML = ''; var tr = rows[i]; tr.appendChild(newCol); } if(table.editTableInit == true) { xmsbTable_editTable(domId); } } window.xmsbTable_deleteRow = function(domId, rowNum) { var table = document.getElementById(domId); if(!xmsbTable_checkTable(table)) return false; var rows = table.rows; if(rowNum <= 0 || rowNum > rows.length) { console.error("第" + rowNum + "行数据不存在,无法删除"); return false; } rows[0].parentNode.removeChild(rows[rowNum - 1]); } window.xmsbTable_deleteCol = function(domId, colNum) { var table = document.getElementById(domId); if(!xmsbTable_checkTable(table)) return false; var cols = table.rows[table.rows.length - 1].cells; if(colNum <= 0 || colNum > cols.length) { console.error("第" + colNum + "列数据不存在,无法删除"); return false; } for(var i = 0; i < table.rows.length; i ++) { table.rows[i].removeChild(table.rows[i].children[colNum - 1]); } } window.xmsbTable_getTable = function(domId) { var table = document.getElementById(domId); if(!xmsbTable_checkTable(table)) return false; var result = []; result['dom'] = table; result['content'] = []; for(var i = 0; i < table.rows.length; i ++) { result['content'][i] = []; for(var ii = 0; ii < table.rows[i].children.length; ii ++) { result['content'][i][ii] = table.rows[i].children[ii].innerHTML.trim(); } } return result; } window.xmsbTable_checkTable = function(table) { if(table.tagName != 'TABLE') { console.error("绑定的元素不是TABLE,无法生效"); return false; } else { return true; } }
欢迎转载,转载时请注明来源。