JSFiddle - React, Tailwind, and code Playground

by andrewzheludkov

HTML

<table class="cells table info table-bordered table-striped">
			<tbody><tr>
				<th class="coltop width30">NAME</th>
				<th class="coltop width20">TYPE</th>
				<th class="coltop width40">{PARAMS}</th>
			</tr>
			<tr id="exnew">
				<td>
					<input type="text" name="field_name" value="" class="exfldname">
					<p class="small">DESCR (_TITLE)</p>
							<textarea name="field_description" rows="1" cols="30" class="exflddesc"></textarea>
					<p class="small">HTML-code</p>
						<textarea name="field_html" rows="1" cols="60" class="exfldhtml"></textarea>
				</td>
				<td>
							<select name="field_type" class="exfldtype"><option value="input" selected="selected">input</option><option value="inputint">inputint</option><option value="currency">currency</option><option value="double">double</option><option value="textarea">textarea</option><option value="select">select</option><option value="checkbox">checkbox</option><option value="radio">radio</option><option value="datetime">datetime</option><option value="country">country</option><option value="range">range</option><option value="checklistbox">checklistbox</option><option value="file">file</option></select>
					<p class="small">Парсинг</p>
						<select name="field_parse" class="exfldparse"><option value="HTML" selected="selected">По умолчанию</option><option value="Text">Нет</option></select>
						<p class="small"><label class="checkbox"><input type="hidden" name="field_required" value="0"><label><input type="checkbox" name="field_required" value="1" class="exfldrequired"> </label>Обязательное</label></p>
				</td>
				<td>
							<textarea name="field_params" rows="1" cols="60" class="exfldparams"></textarea>
					<p class="small">Значения для select, radio, checklistbox (через запятую)</p>
							<textarea name="field_variants" rows="1" cols="60" class="exfldvariants" title="Не используется" disabled="disabled"></textarea>
					<p class="small">Значение по умолчанию</p>
						<textarea...

CSS

input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
    cursor: not-allowed;
    background-color: red;
}

JavaScript

var exFLDHELPERS = "{ADMIN_EXTRAFIELDS_TAGS}";
	var exnovars = "{PHP.L.adm_extrafields_help_notused}";
	var exvariants = "{PHP.L.adm_extrafields_help_variants}";
	var exrange = "{PHP.L.adm_extrafields_help_range}";
	var exdata = "{PHP.L.adm_extrafields_help_data}";
	var exregex = "{PHP.L.adm_extrafields_help_regex}";
	var exfile = "{PHP.L.adm_extrafields_help_file}";
	var exseparator = "{PHP.L.adm_extrafields_help_separator}";

		$('body').on("change", '.exfldtype', function(){
			var exParent = $(this).closest('tr');
			var exvalid =  $(this).attr('value');
			if(exvalid == 'select' || exvalid == 'radio' || exvalid == 'checklistbox' || exvalid == 'file')
			{
				if (exvalid == 'file') {
					$(exParent).find('.exfldvariants').attr('title', 'jpg, png, pdf, zip,..');
				} else {
					$(exParent).find('.exfldvariants').attr('title',exvariants);
				}
				$(exParent).find('.exfldvariants').removeAttr("disabled");
			}
			else
			{
				$(exParent).find('.exfldvariants').attr('title', exnovars);
				$(exParent).find('.exfldvariants').attr('disabled', 'disabled');

			}
			switch(exvalid)
			{
				case 'input':
					$(exParent).find('.exfldparams').attr('title',exregex);
					$(exParent).find('.exfldparams').removeAttr("disabled");
					break;
				case 'inputint':
					$(exParent).find('.exfldparams').attr('title',exrange);
					$(exParent).find('.exfldparams').removeAttr("disabled");
					break;
				case 'currency':
					$(exParent).find('.exfldparams').attr('title',exrange);
					$(exParent).find('.exfldparams').removeAttr("disabled");
					break;
				case 'double':
					$(exParent).find('.exfldparams').attr('title',exrange);
					$(exParent).find('.exfldparams').removeAttr("disabled");
					break;
				case 'textarea':
					$(exParent).find('.exfldparams').attr('title',exnovars);
					$(exParent).find('.exfldparams').attr('disabled', 'disabled');
					break;
				case...