Table Add / Delete Column

function using javascript only , jQuery only for event on jsfiddle.

by died

HTML

<button id="m14">add Alienware 14</button>
<button id="m17">add Alienware 17</button>
<button id="re">remove</button>
<div>
    <table id="tbSpec">
        <thead>
            <tr>
                <th>spec</th>
            </tr>
        </thead>
        <tbody>
            <tr><td>型號 Model</td></tr>
            <tr><td>處理器 CPU</td></tr>
            <tr><td>記憶體 Memory</td></tr>
            <tr><td>顯示卡 Video Card</td></tr>
            <tr><td>螢幕 Display</td></tr>
        </tbody>
    </table>
</div>

CSS

#tbSpec td{
    padding:2px;
}

JavaScript

var a14={"model":"Alienware 14","CPU":"4th Generation Intel® Core™ i7-4900MQ processor","memory":"16GB Dual Channel DDR3L at 1600MHz","video":"NVIDIA® GeForce® GTX 765M with 2GB GDDR5","display":"14 inch WLED FHD (1920 x 1080) Anti-Glare Display","Hard Drive":"512GB Solid State Drive SATA hard drive"};
var a17={"model":"Alienware 17","CPU":"4th Generation Intel® Core™ i7-4930MX processor","memory":"32GB Dual Channel DDR3L at 1600MHz","video":"NVIDIA® GeForce® GTX 780M with 4GB GDDR5","display":"17.3 inch 120Hz WLED FHD (1920 x 1080) TrueLife Display w/3D Bundle"};

$(document).ready(function () {
    $('#m14').click(function () { addItem(a14); });
    $('#m17').click(function () { addItem(a17); });
    $('#re').click(function () { remove(); });
});

function addItem(item) {
    addColumn('tbSpec',item);
}

function remove() {
    deleteColumn('tbSpec');
}

function addColumn(tblId, d) {
    var tblHead = document.getElementById(tblId).tHead;
    var newTh = document.createElement('th');
    tblHead.rows[tblHead.rows.length - 1].appendChild(newTh);
    newTh.innerHTML = d.model;
    
    var tblBody = document.getElementById(tblId).tBodies[0];
    var rowCount = 0;
    for (var key in d) {
        var newCell = tblBody.rows[rowCount].insertCell(-1);
        newCell.innerHTML = d[key];
        rowCount++;
        if (rowCount >= tblBody.rows.length) break;
    }
}

function deleteColumn(tblId) {
    var allRows = document.getElementById(tblId).rows;
    for (var i = 0; i < allRows.length; i++) {
        if (allRows[i].cells.length > 1) {
            allRows[i].deleteCell(-1);
        }
    }
}