原生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() || '&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;
    }
}