JSFiddle - React, Tailwind, and code Playground

by swim89

HTML

<form id="nuovaIscrFRM">
			<table width="90%" border="1" style="border-collapse: collapse; background-color: #FFF;" cellspacing="0" cellpadding="3" id="gareTable">
    			<tr>
		        	<td colspan="28" align="left"><h2><font color="#FF0000">INSERIMENTO ATLETE - Duo (Juniores)</font></h2><br />Inserire le riserve come ultime atlete.</td>
        		</tr>
                <tr>
                  <th>TESSERA</th>
                  <th>COGNOME E NOME</th>
                  <th>ANNO</th>
                  <th>CATEGORIA</th>
                  <th></th>
                  <th>OPERAZIONI</th>
                </tr>
                <tr style="background-color: #F99 ;">
                    <td align="left">SIC-034031</td>
                    <td align="left">ALBERTI ELENA CRISTINA</td>
                    <td align="center">2000</td>
                    <td align="center">Ragazze</td>
                    <td align="center" id="RSIC-034031"></td>
                    <td align="center">
                                        <input type="button" onclick="invia('SIC-034031','');" value="AGGIUNGI" style="height: 20px; width: 110px; background-color: #A5EFC5 ; color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: 12px; background-repeat: no-repeat; background-position: left center;" id="iscriviSIC-034031" class="pulsanteIscrizioni" name="xaggiorna"/>&nbsp;
                        <input type="button" onclick="invia('SIC-034031','R');" value="RISERVA" style="height: 20px; width: 110px; background-color: #F00000; color: #FFFFFF; font-family: Arial,Helvetica,sans-serif; font-size: 12px; background-repeat: no-repeat; background-position: left center;" id="iscriviRSIC-034031" class="pulsanteIscrizioni" name="xaggiorna"/>
                                    </td>
                </tr>
</table>
            <input type="hidden" name="idIscr" value="185250" />
            <input type="hidden" name="atlIscr" id="atlIscr" value="" />
            <input type="hidden"...

JavaScript

$(function() {
		
	$(".pulsanteIscrizioni").on("click", function()
	{
		$("#cache").css("visibility","visible");
		alert("OK");
		var str = $("#nuovaIscrFRM").serialize();
		$.ajax({
			type: "POST",
			url: "./inviaIscrSy_st.php",
			data: str
		}).done(function(msg) {
			esito=msg.substr(2,2);
			messaggio=msg.split(";");
			//mess=msg.substr(4,(msg.length-1));
			mess=messaggio[1];
			$("#cache").css("visibility","hidden");
			if(esito == "OK"){
				var dati=msg.split(";");
				//alert(dati[1]);
				if(dati[1]=="C"){
					$("input#iscrivi" + dati[2]).attr("style","height: 20px; width: 110px; background-color: #A5EFC5 ; color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: 12px;");
					$("input#iscrivi" + dati[2]).attr("value","AGGIUNGI");
					$("input#iscrivi" + dati[2]).after('&nbsp;<input type="button" onclick="invia(\'' + dati[2] + '\',\'R\');" value="RISERVA" style="height: 20px; width: 110px; background-color: #F00000; color: #FFFFFF; font-family: Arial,Helvetica,sans-serif; font-size: 12px; background-repeat: no-repeat; background-position: left center;" id="iscriviR' + dati[2] + '" name="xaggiorna"/>');
					$("#iscriviR" + dati[2]).addClass("pulsanteIscrizioni");
					$("#R" + dati[2]).html("");
					$("#riserva").val("");
					$("#atlIscr").val("");
				}else{
					$("#iscrivi" + dati[2]).attr("style","height: 20px; width: 110px; background-color: #03F; color: #FFF; font-family: Arial,Helvetica,sans-serif; font-size: 12px;");
					$("#iscrivi" + dati[2]).attr("value","TOGLI");
					$("#iscriviR" + dati[2]).remove();
					$("#R" + dati[2]).append(dati[3]);
//						$msg.=$gara.";".$storico.";".$squadra.";".$wc.";".$_POST['wc'].";".$fc.";".$tempo;
				}	
			}
			//alert (ms);
			if(esito == "NO"){
				/*
				$('.msg').fadeTo('slow', 1);$('.msg').slideShow(341);
				*/
				alert(mess);
				if(trim(messaggio[2])!="")
					window.location=messaggio[2];
			}						
		});
		return false;
	});
});

function...