JSFiddle - React, Tailwind, and code Playground

by samizdam

HTML

<form method="post" action="/admin/classes/add_class">
<fieldset>
<legend>Класс</legend>
<label>Название: <input type="text" name="name" class="tr-from" required="required" placeholder="Имя для класса"></label><label>Код: <input type="text" name="code" class="tr-to" required="required" placeholder="code"></label>
</fieldset>
<fieldset>
<legend>Атрибуты</legend>
<table id="attributes"><tbody><tr class="attribute-row">
<td>
<label>Имя: <input type="text" class="tr-from" name="attrName[]"></label><label>Код: <input type="text" class="tr-to" name="attrCode[]"></label><label>Тип: <select name="attrType[]"><option value="date">date</option>
<option value="int">int</option>
<option value="string">string</option>
<option value="text">text</option></select></label><label>Обязательный
		<input type="radio" checked="" value="1" name="required[]">да
		<input type="radio" value="1" name="required[]">нет
	</label><label>Множественный
		<input type="radio" checked="" value="0" name="multiple[]">да
		<input type="radio" value="1" name="multiple[]">нет
	</label>
</td>
<td><a class="add" href="#">+</a></td>
</tr></tbody></table>
</fieldset>
<input type="submit">
</form>

CSS

label {
    background: none repeat scroll 0 0 yellowgreen;
    margin: 2px;
    padding: 4px;
    font-size: 10px;
}

JavaScript

$(function(){
	// добавление полей
	$('a.add').bind('click', function(){
		var parentObj = '#attributes';
		var copyObj = 'tr.attribute-row'; 
		$(parentObj+' '+copyObj+':first').clone(false).insertAfter($(parentObj+' '+copyObj+':last'));
		$(copyObj+':last input:text').val('');
		$(parentObj+' '+copyObj+':last a').replaceWith('<a href="#" class="delete">-</a>');
		return false;
	});
	
	// удаление полей
	$('a.delete').live('click', function(){
		$(this).parents('tr').remove();
		return false;
	});	
});