add.js

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.button {
			color: white;
			font-size: 20px;
		}

		td {
			border: 1px solid black;
			transition: background-color .5s, border-color .2s;
			width: 100px;
			height: 100px;
		}

		td.created {
			border-color: transparent;
		}

		td.new {
			border: 1px solid green;
			background-color: #b3ffb3;
		}

	</style>
	<script type="text/javascript">
		function createCell(row) {
			var newCell = row.insertCell(-1);
			newCell.className = 'created';
			setTimeout(function() {
				newCell.className = 'new';
			}, 100);
			setTimeout(function() {
				newCell.className = '';
			}, 500);
		}

		function createRow(table) {
			var newRow = table.insertRow(-1);
			var colsLength = table.tBodies[0].rows[0].cells.length;
			for (var i = 0; i < colsLength; i++) {
				createCell(newRow);
			}
		}

		function createColumn(table) {
			var rows = table.tBodies[0].rows;
			for (var i = 0, l = rows.length; i < l; i++) {
				createCell(rows[i]);
			}
		}

		document.addEventListener('DOMContentLoaded', function() {
			var table = document.querySelector('table.table');
				document.querySelector('#add-column').onclick = function() {
				createColumn(table);
			}
				document.querySelector('#add-row').onclick = function() {
				createRow(table);
			}
		});

	</script>
</head>
<body>
	<table class="table">
	  <div class="add-column">
	    <button id="add-column" type="button" class="button add-col"> + </button>
	  </div>
	  <tr>
	    <td></td>
	    <td></td>
	    <td></td>
	    <td></td>
	  </tr>
	  <tr>
	    <td></td>
	    <td></td>
	    <td></td>
	    <td></td>
	  </tr>
	  <tr>
	    <td></td>
	    <td></td>
	    <td></td>
	    <td></td>
	  </tr>
	  <tr>
	    <td></td>
	    <td></td>
	    <td></td>
	    <td></td>
	  </tr>
	</table>
	<div class="add-row">
	  <button id="add-row" class="button"> + </button>
	</div>

</body>
</html>