JSFiddle - React, Tailwind, and code Playground

by konijn_gmail_com

HTML

<div class="SOL LIMITS">
    
<h1>Outil terres Polues</h1>

    <form id="form1">
        <table id="table_id" class="scrollTable">
            <thead class="fixedHeader">
                <tr>
                    <th><a href="#">Paramètre</a>

                    </th>
                    <th><a href="#">Insérez dans cette colonne vos résultats d'analyses de terres</a>

                    </th>
                    <th><a><b>Votre terre peut etre reçue dans une instalation :</b><br><input type="submit" value=" Validation" /><input type="reset" value="réinitialiser" "></a> 
                    </th>
                </tr>
                </tr>
            </thead>
            <tbody id="form1" class="scrollContent">
                <tr>
                    <td rowspan=7>
                        <p align=center><span>Analyses<br>sur brut<br>(mg/kg MS)</span>

                        </p>
                    </td>
                    <td>COT</td>
                    <td>
                        <input type="text" class="cellData" name="celula1" id="celula1" value="" />
                    </td>
                    <td>mg/kg</td>
                    <td id="soilMessage1" class="y_n"></td>
                </tr>
                <tr>
                    <td>HCT C10-C40</td>
                    <td>
                        <input type="text" class="cellData" name="celula2" id="celula2" value="" />
                    </td>
                    <td>
                        <p>mg/kg</p>
                    </td>
                    <td id="soilMessage2" class="y_n"></td>
                </tr>
                <tr>
                    <td>HAP</td>
                    <td>
                        <input type="text" class="cellData" name="celula3" id="celula3" value="" />
                    </td>
                    <td>mg/kg</td>
                    <td id="soilMessage3" class="y_n"></td>
                </tr>
                <tr>
                    <td>PCB</td>
             ...

CSS

<!--
	/* begin some basic styling here                     */
	:lang(fr) content="text/html;charset=utf-8" body {
	    margin: 5px;
	    padding: 0
	}
	table, td, {
	    align: center
	}
	h1 {
	    margin: 0 0 5px 0
	}
	h2 {
	    color:#0000FF;
	    margin: 0 0 15px 0
	}
	/* end basic styling                                 */
	/* define height and width of scrollable area. Add 16px to width for scrollbar          */
	div.tableContainer {
	    clear: both;
	    border: 1px solid #963;
	    height: 585px;
	    overflow: auto;
	    width: 256px
	}
	/* Reset overflow value to hidden for all non-IE browsers. */
	html>body div.tableContainer {
	    overflow: hidden;
	    width: 656px
	}
	/* define width of table. IE browsers only                 */
	div.tableContainer table {
	    float: center;
	    width: 656px
	}
	/* define width of table. Add 16px to width for scrollbar.           */
	/* All other non-IE browsers.                                        */
	html>body div.tableContainer table {
	    width: 656px
	}
	/* set table header to a fixed position. WinIE 6.x only                                       */
	/* In WinIE 6.x, any element with a position property set to relative and is a child of       */
	/* an element that has an overflow property set, the relative value translates into fixed.    */
	/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
	thead.fixedHeader tr {
	    position: relative
	}
	/* set THEAD element to have block level attributes. All other non-IE browsers            */
	/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
	html>body thead.fixedHeader tr {
	    display: block
	}
	/* make the TH elements pretty */
	thead.fixedHeader th {
	    background: #ee4657;
	    border-left: 1px solid #EB8;
	    border-right: 1px solid #B74;
	    border-top: 1px solid #EB8;
	    font-weight: normal;
	    padding: 4px 3px;
	    text-align: center
	}
	/* make the A...

JavaScript

function warn( id , text )
{
  document.getElementById( "soilMessage" + id ).innerHTML = text;
  return true;
}

function greater( rule , value , id )
{
    if( value > rule.value )
      return warn( id , rule.message )
}

function analyze( id , rules )
{
  var value = document.getElementById( 'celula' + id ).value * 1;
  if( isNaN( value ) )
      warn( id , "SVP inserez un nombre" );
  for( var key in rules )
  {
      var rule = rules[key];
      var wrong = rule.f( value , value , id );
      if( wrong )
        return false;
  }
}



window.onload = function () {
  document.getElementById("form1").onsubmit = function ()
  {
    console.log("Getting mentally ready!");
    analyze( "1" , [{  f : greater , value : 1 , "Paramètre sans limite impose" }] );
    analyze( "2" , [{  f : greater , value : 1 , "Paramètre sans limite impose" }] );
        
    return false; // cancel submit
  }
};
$(function () {
    $("#form1 td.y_n:contains('FNADE Classe 3')").css('background-color', '#fcc');
});