határ értékek

by John Doe

HTML

<form action="">
  <table>
    <tr>
      <td>
        <span>
        1.sáv
      </span>
      </td>
      <td>
        <span>
        2.sáv
      </span>
      </td>
      <td>
        <span>
        3.sáv
      </span>
      </td>
    </tr>
    <tr>
      <td class="ka">
        <input id="sav1" data-value="0" data-sav="1" type="text" value="" readonly="true">
      </td>
      <td>
        <input id="sav2" data-value="" data-sav="2" type="text" value="">
      </td>
      <td>
        <input id="sav3" data-value="" data-sav="3" type="text" value="">
      </td>
    </tr>
  </table>
</form>

CSS

* {
  box-sizing: border-box;
}

body {
  font-family: arial;
}

.ka {
  cursor: not-allowed;
}

input#sav1 {
  pointer-events: none;
}

span {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 12px;
}

JavaScript

$("input[type='text']").focus(function() {
  $(this).val($(this).data('value'));
})
$("input[type='text']").blur(function() {
  if ($(this).val() > 0) {
    $(this).data('value', $(this).val());
    setInputValue($(this).data('sav'));
    setInputValue(parseInt($(this).data('sav')) - 1);
  } else {
    $(this).val('');
    $(this).data('value', '');
    setInputValue(parseInt($(this).data('sav')) - 1);
  }
});
$("input[type='text']").keyup(function() {
	 $(this).val($(this).val().replace(/[^0-9\.]/g, ""));
})
function setInputValue(dsId) {
  var obj = ('#sav' + dsId),
    nextObj = $('#sav' + (parseInt(dsId) + 1)),
    objDataVal = $(obj).data('value');
  if (parseInt($(nextObj).data('value')) > 0) {
    $(obj).val(objDataVal + ' - ' + (parseInt($(nextObj).data('value')) - 1));
  } else {
    $(obj).val(objDataVal + ' - ');
  }
}

//Beállítja az aktuális input értékét a data-value alapján
//beállítja az inputok data-value értékét a bevitt érték alapján és megformázza a megjelenített tartományt.
//ha a bevitt érték nagyobb nullánál az aktuális input data-value értékének és a megjelenített tartomány kezdetének beállítja.
//Ha a következő mező data-value értéke nagyobb nullánál a tartomány végnek beállítja az eggyel kisebb számot, ellenkező esetben üresen hagyja.  
//a tartomány végnek a következő bevitelimező data-value értékéhez képest eggyel kisebb számot állít be, ha nincs a következő mezőnek