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

script src="./xmsbTable.js" type="text/javascript" charset="utf-8">script>

table id="table" border="1" cellspacing="0" cellpadding="5" height="100">
    tr>
        th width="100">Ath>
        th width="100">Ath>
        th width="100">Ath>
    tr>
    tr>
        td>xmsbtd>
        td>xmsbtd>
        td>xmsbtd>
    tr>
    tr>
        td>xmsbtd>
        td>xmsbtd>
        td style="background:black; color: white;">xmsbtd>
    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>

window.xmsbTable_editTable = function(domId)
{
    var table = document.getElementById(domId);
    table.editTableInit = true;
    
    var tds = table.getElementsByTagName(‘td‘);
    for(var i = 0; i )
    {
        tds[i].onclick = init;
    }
    
    var ths = table.getElementsByTagName(‘th‘);
    for(var i = 0; 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 = "";
            
            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 )
    {
        newRow.innerHTML += cols[i].outerHTML;
    }
    
    for(var i = 0; 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 )
    {
        var cols = rows[i].children;
        
        var newCol = document.createElement(cols[cols.length - 1].tagName);
        
        for(var ii = 0; ii )
        {
            newCol.setAttribute(cols[cols.length - 1].attributes[ii].name, cols[cols.length - 1].attributes[ii].value);
        }
        
        for(var ii = 0; 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  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  cols.length)
    {
        console.error("第" + colNum + "列数据不存在，无法删除");
        return false;
    }
    
    for(var i = 0; 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 )
    {
        result[‘content‘][i] = [];
        
        for(var ii = 0; ii )
        {
            result[‘content‘][i][ii] = table.rows[i].children[ii].innerHTML.trim();
        }
    }
    
    return result;
}