HTML表格修改字段,原生JS操作table表格：修改表格内容，添加删除行、列，获取表格数据...

window.xmsbTable_editTable = function(domId)

{var table =document.getElementById(domId);

table.editTableInit= true;var tds = table.getElementsByTagName(‘td‘);for(var i = 0; i < tds.length; i ++)

{

tds[i].οnclick=init;

}var ths = table.getElementsByTagName(‘th‘);for(var i = 0; i < ths.length; i ++)

{

ths[i].οnclick=init;

}functioninit()

{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 = "";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);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);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);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);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);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();

}

}returnresult;

}