JSFiddle - React, Tailwind, and code Playground

by fenderistic

HTML

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
		</script>
	</head>
	<body>
		<form>
		<p>
		Naslov opravila: <input id="naslov" type="text" name="naslov">
		Vrsta opravila: <input id="vrsta" type="text" name="vrsta">
		Nivo pomembnosti: 
		<select name="nivo" class="nivo">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
		</select>
		<button class="button">Dodaj opravilo</button>
		</form>
		</p>
		<table class="tabela" cellspacing="3" style="text-align:center">
			<thead>
				<tr>
					<th>#</th>
					<th>Opravilo</th>
					<th>Vrsta</th>
					<th>Nujnost</th>
					<th>Datum vnosa</th>
				</tr>
			</thead>
			<tbody id="telo">
			</tbody>

		</table>
		<button id="odstrani">Odstrani</button>
		<script src="script.js"></script>
	</body>
</html>

JavaScript

$('.button').on('click', function(event) {
	var naslov = $('#naslov').val();
	var vrsta = $('#vrsta').val();
	var nivo = $('.nivo option:selected').val();
	var vrste = $('#telo').find('tr').length;
	var datum = new Date();
	var d = datum.getDate() + "." + (datum.getMonth()+1) + "." + datum.getFullYear();
	if(naslov.length > 0) {
        var novavrsta = $('<tr><td></td><td></td><td></td><td></td><td></td></tr>');
        novavrsta.children().eq(0).text(vrste+1);
        novavrsta.children().eq(1).text(naslov);
        novavrsta.children().eq(2).text(vrsta);
		novavrsta.children().eq(3).text(nivo);
		novavrsta.children().eq(4).text(d);
        novavrsta.appendTo('#telo');
		$( "#telo tr" ).addClass(function( index ) {
			return "vrsta" + (index+1);
		});
	}
	return false;
});
$(document).on('click', 'tr', function(){
    $(this).css({"color":"red"});
    $(this).addClass("izbrano");
});