JSFiddle - React, Tailwind, and code Playground

by Murat Kezli

HTML

<body>

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&amp;subset=latin-ext" rel="stylesheet" />

<div id="mk-modal-contanier">
	<div class="mk-modal-header" onclick="modelgizle();">
		&nbsp;</div>
	<div class="mk-modal-body" id="detay">
		_</div>
	<div class="mk-modal-footer">
		&nbsp;</div>
</div>
<div id="mk-modal-back" onclick="modelgizle();">
	&nbsp;</div>
<div class="gd2" style="padding-right:10px; margin-top:10px;">
	<label id="ulkeleregoresuzbaslik" style="color:back;">_</label> <select id="ulkesec" onchange="sor(); " style="color:border-radius:none;"><option id="opsiyonilkdeger" selected="selected" value="0">d</option></select>
	<hr />
	<label id="katilimciarabaslik">_</label> <input id="ara" input="" name="Ara" onkeyup="sor();" style="width:100%; height:32px; line-height:32px; font-size:large; outline:none;" type="text" value="" />
	<hr />
	<table class="kezli" id="ekran">
		<thead>
			<tr>
				<th class="sol" id="firmabaslik">
					&nbsp;</th>
				<th id="salonbaslik" style="text-align:center;">
					&nbsp;</th>
				<th id="standbaslik">
					&nbsp;</th>
				<th id="ulkebaslik">
					&nbsp;</th>
			</tr>
		</thead>
		<tbody id="kezli">
		</tbody>
	</table>
</div>
<div id="sayfalama">
	&nbsp;</div>
<br />
</body>

CSS

table.kezli {
  font-family: 'Roboto', sans-serif; font-weight: 300;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}
table.kezli td, table.kezli th {
  border: 1px solid #ffffff;
  padding: 8px 2px;
}
table.kezli tbody td {
  font-size: small;
  color: #000000;
}
table.kezli tr:nth-child(even) {
  background: #e2e2e2;
}
table.kezli thead {
  font-size: 14px;
  font-weight: bold;
  color: #000000;
  background: #fbba00;
  
}
table.kezli thead td {
  font-size: 14px;
  color:#000000;
}
.sol{ text-align:left;margin-left:6px;}
#sayfalama { margin-top:10px; margin-left: -10px;}
#sayfalama .sayfalar { width:30px !important; height:30px !important; font-size:normal; line-height:30px; text-align:center; border:1px solid #cccccc; margin-left:10px; margin-bottom: 10px; cursor:pointer; float:left;}
#sayfalama .sayfalar:hover{ background-color:#fbba00;}
.aktif{background-color:#fbba00;}
.gizle{display:none !important;}
.goster{display:block !important; }
.temiz{clear:both !important}

#mk-modal-back{background-color:black; opacity: 0.8;z-index: 1000; left:0px; top:0px; position: fixed;}
#mk-modal-contanier{margin-top: 5px; width:580px; min-height:300px; z-index: 1001; tab-index:-1; position:fixed;  font-family: 'Roboto', sans-serif; font-weight: 300; line-height: 180%; top:50px !important; }
#mk-modal-contanier a{ text-decoration: none; color: black;}
#mk-modal-contanier a:hover{color:#CD2027 }
#mk-modal-contanier a:active{color:black;}

.mk-modal-header{ background:url("https://yapifuariistanbul.com/www_yapi-istanbul/media/Campaign-Assets/Banners/popup/color-bant2.png"); width:580px; height:14px; }
.mk-modal-header::before{content:url('https://yapifuariistanbul.com/www_yapi-istanbul/media/Campaign-Assets/Banners/popup/home.png');  position:relative;  z-index:1002;  right:-10px;  top:-50px;}
.mk-modal-header::after{content:url('https://yapifuariistanbul.com/www_yapi-istanbul/media/Campaign-Assets/Banners/popup/kapat.png'); position:relative; ...

JavaScript

$(document).ready(function(){
	"use strict";
     sor();
    ulke();
   $("#mk-modal-back, #mk-modal-contanier").hide();
	 modal();
   });





$(document).keydown(function(e) {
	"use strict";
    if(e.which === 8) {
        sor();
    }
});

var fuar = 2073;  
var dil = 1;
var firmabaslik = "Firma Adı";
var salonbaslik = "Salon";
var standbaslik = "Stand";
var ulkebaslik = "Ülke";
var ulkeleregoresuzbaslik = "Ülkelere göre";
var opsiyonilkdeger = "Tüm Ülkeler";
var katilimciarabaslik = "Katılımcı Ara";
//var salon = "salon";
//var stand = "stand";
var veriSayisi = 35;







function ulke() { 
	"use strict";
    $.ajax({
url: 'https://app.iteturkey-fkys.com/mkezli.asmx/ulkeler',
type: "post",
dataType: "json",
data:
{ FuarID: fuar, dil: dil},
   
     success: function(data){
            var toAppend = '';
           $.each(data,function(i,o){
           toAppend += "<option value="+o.ulkeId+">"+o.ulke+"</option>";
          });

         $('#ulkesec').append(toAppend);
        }
    
    });
    }


function sor(gelen) {
"use strict";
document.getElementById("kezli").innerHTML="";
document.getElementById("firmabaslik").innerHTML=firmabaslik;
document.getElementById("salonbaslik").innerHTML=salonbaslik;
document.getElementById("standbaslik").innerHTML=standbaslik;
document.getElementById("ulkebaslik").innerHTML=ulkebaslik;
document.getElementById("ulkeleregoresuzbaslik").innerHTML=ulkeleregoresuzbaslik;
document.getElementById("opsiyonilkdeger").innerHTML=opsiyonilkdeger;
document.getElementById("katilimciarabaslik").innerHTML=katilimciarabaslik;

var firma = $(gelen).attr("data-firma") ;
var ulkeId = $("#ulkesec").val();
var ara = $("#ara").val();
if (firma == null) {firma = 0}
var salon = $(gelen).attr("data-salon") ;
if (salon == null) {salon = 0}

$.ajax({
url: 'https://app.iteturkey-fkys.com/mkezli.asmx/FKYStoKENTICO',
type: "post",
dataType: "json",
data:
{ FuarID: fuar, Id: firma, salonsuz:salon, ara:ara, ulkeId:ulkeId, dil: dil},

success: function(data,...