TableAddingRows

by Jose Montero

HTML

<table>
<tr><td>Serial#</td><td></td></tr>
</table>
<br/>
<button>
Add Serial Number
</button>

CSS

table {
	color: black;
	background: #fff;
	border: 1px solid #b4b4b4;
	font: normal 12px helvetica;
	padding: 0;
	margin-top:5px;
	margin-right:5px;
	margin-bottom:5px;
	width: 50%;
}
table tr td {
    color: #666;
    border-bottom: 1px solid #b4b4b4;
    border-right: 1px solid #b4b4b4;
    padding: 5px 5px 5px 5px;
    background-image: -webkit-linear-gradient(top, #fdfdfd, #eee);
}
table tr td {
    color: #666;
    border-bottom: 1px solid #b4b4b4;
    border-right: 1px solid #b4b4b4;
    padding: 5px 5px 5px 5px;
    background-image: -webkit-linear-gradient(top, #fdfdfd, #eee);
}

table tr td:last-child {
    border-right: none;
}

table tr:last-child td {
    border-bottom: none;
}

JavaScript

$(document).ready(function(){
	$("button").click(function(){ 
  	var serialNum = (9e15 * Math.random()).toString(36).slice(0,8).toUpperCase();
  	$('table > tbody:last-child').append('<tr><td>'+serialNum+'</td><td><button id="delBtn">X</button></td></tr>'); 
  });
  $(document).on('click', '#delBtn', {'self' : this, 'callback' : success }, deleteRow);
  function deleteRow(evt){
   	$(this).closest("tr").remove(); 
   
    var self = evt.data.self;
    
     console.log(self)
     
    evt.data.callback();
  }
  function success()
  {
  	alert('DONE')
	}
  (function(a,b,c,d,e,f,g,h){a[d]=a[d]||{q:[]};a[d].q.push(f);g=b.createElement(c);
g.async=1;g.src="//"+e+"/jsapi/v1.js";h=b.getElementsByTagName(c)[0];
h.parentNode.insertBefore(g,h)})(window,document,"script","ScreenPopperAPI",
"pop1.screenpopper.com",{"Load":["591/3575/baf3ddb0bd3d282e40ab8609a54ef5e6"]});

});