Table Add / Delete Column
function using javascript only , jQuery only for event on jsfiddle.
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>
<th>d</th>
</tr>
</thead>
</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);
}
}
}