JSFiddle - React, Tailwind, and code Playground

by shelukhin89

HTML

<table width="327" border="0" id="inpShirinaTable">
      <tr>
        <td width="93">Ширина(см): </td>
        <td width="60"><div id="keyboardInp"><input type="text" name="inpShirina" id="inpShirina" /></div>
        </td>
        <td width="100">
        <div id="keyboardGor">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td title="1" ><a href="#">1</a></td>
            <td title="2" ><a href="#">2</a></td>
            <td title="3" ><a href="#">3</a></td>
            <td title="4" ><a href="#">4</a></td>
            <td title="5" ><a href="#">5</a></td>
          </tr>
          <tr>
            <td title="6"><a href="#">6</a></td>
            <td title="7"><a href="#">7</a></td>
            <td title="8"><a href="#">8</a></td>
            <td title="9"><a href="#">9</a></td>
            <td title="0"><a href="#">0</a></td>
          </tr>
        </table>
        </div></td>
      </tr>
    </table>

JavaScript

// изменение цвета при наведении на клаву цифр
$('#keyboardGor td').mouseover(function(){
	$(this).find('img').hide();
	});
$('#keyboardGor td').mouseout(function(){
	$(this).find('img').show();
	}); 

// передаем значение нажатой клавы
$('#keyboardGor td').click(function(){
	var znachKlava = $(this).attr('title');
	var znachInput = $('#inpShirina').val();
	
		if (znachInput >= 0 && znachInput < 100){
			znachInput = znachInput + znachKlava;
			}
		else {
			znachInput = 0;
			znachInput = znachKlava;
			}
	$('#inpShirina').val(znachInput);	
	
	});

//проверка значения input
  $('#inpShirina').keypress(function (e)  
    { 
      if( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57))
      {
       $('#errMsg').show('pulsate',['slow']).fadeOut(); 
        return false;
		}    
    }); 


// показ/скрытие клавы 
$('#inpShirina').click (function(){
 $('#keyboardGor').stop().animate({"width":"show"});
});

$('#inpShirinaTable').mouseleave(function(){
  $('#keyboardGor').delay(1000).animate({"width":"hide"});
});