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

Posted 2020-12-13 何效名的博客

---

 

 

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() || \'&emsp;\';
                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 = \'&emsp;\';
    }
    
    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;
    }
}