<!DOCTYPE html>
<html>
<head>
	<title></title>

	<style type="text/css">
		label
		{
			display:inline-block;
			width: 100px;
		}

		table, td, th { border: 1px solid black;
		 border-collapse: collapse;
		  }
	</style>
</head>
<body>


<h1>Project details</h1>
<br>
<label>Author</label><input id="author" type="text"><br>
<label>Project</label><input id="project" type="text"><br>
<label>Cost</label><input id="cost" type="text"><br>

<input type="button" name="add" value="Add" onclick="addRow();">

<h2>Project list</h2>
<table id="table1">
<thead><th> Author </th><th> Project </th><th> Cost </th></thead>
<tbody></tbody>
</table>



<script type="text/javascript">
function addRow()
{
	var avtor = document.getElementById("author").value;
	var proekt = document.getElementById("project").value;
	var cini = document.getElementById("cost").value;

	if(avtor == "" || proekt == "" || cini == "")
	{
		alert("Ne se ispolneti site polinja");
		return;

	}

		var tabela = document.getElementById("table1").getElementsByTagName("tbody")[0];
		//vnesi nov red vo tabelata
		var newRow = tabela.insertRow(tabela.rows.length); //dolzina na red moze i 3 samo

		//popolnuvanje na red
		var kelija0 = newRow.insertCell(0); //praenje kelija na indeks 0 vo redot
		var kelija1 = newRow.insertCell(1); //praenje kelija na indeks 0 vo redot
		var kelija2 = newRow.insertCell(2); //praenje kelija na indeks 0 vo redot
		var kelija3 = newRow.insertCell(3);

		//vnesuvanje vrednosti vo keliite
		kelija0.innerHTML = avtor;
		kelija1.innerHTML = proekt;
		kelija2.innerHTML = cini;
		kelija3.innerHTML = "<button onclick='remove(this)'>Remove</button>";

		avtor = "";
		proekt = "";
		cini = "";

}

function remove(red)
{
    var i = red.parentNode.parentNode.rowIndex;
    document.getElementById('table1').deleteRow(i);
}


</script>
</body>
</html>