határ értékek

by John Doe

HTML

<form action="">
  <table>
    <tr class="hidden">
      <th></th>
      <th>tól</th>
      <th></th>
      <th>ig</th>
      <th></th>
      <th>érték</th>
      <th></th>
    </tr>
    <tr>
      <td>1. sáv: </td>
      <td>
        <span class="ka">
          <input id="sav1" data-value="0" data-sav="1" type="text" value="" readonly="true">
        </span>
      </td>
      <td><label>-tól </label></td>
      <td> <span class="ka"> <input id="sav1to" type="text" readonly="true"></span> </td>
      <td><label>-ig </label></td>
      <th> <input type="text" placeholder="érték"></th>
      <td><label for="">Ft</label></td>
    </tr>
    <tr>
      <td>2. sáv: </td>
      <td><input id="sav2" data-value="" data-sav="2" type="text" value=""></td>
      <td><label>-tól </label></td>
      <td> <span class="ka"><input id="sav2to" type="text"></span> </td>
      <td><label>-ig </label></td>
      <th> <input type="text" placeholder="érték"></th>
      <td><label for="">Ft</label></td>
    </tr>
     <tr>
      <td>3. sáv: </td>
      <td><input id="sav3" data-value="" data-sav="3" type="text" value=""></td>
      <td><label>-tól </label></td>
      <td> <span class="ka"><input id="sav3to" type="text"></span> </td>
      <td><label>-ig </label></td>
      <th> <input type="text" placeholder="érték"></th>
      <td><label for="">Ft</label></td>
    </tr>
    <tr>
      <td>4. sáv: </td>
      <td><input id="sav4" data-value="" data-sav="4" type="text" value=""></td>
      <td><label>-tól </label></td>
      <td> <span class="ka"><input id="sav4to" type="text"></span> </td>
      <td><label>-ig </label></td>
      <th> <input type="text" placeholder="érték"></th>
      <td><label for="">Ft</label></td>
    </tr>
    <tr>
      <td>5. sáv: </td>
      <td><input id="sav5" data-value="" data-sav="5" type="text" value=""></td>
      <td><label>-tól </label></td>
      <td> <span class="ka"><input id="sav5to" type="text"></span> </td>
      <td><label>-ig </label></td>
     ...

CSS

* {
  box-sizing: border-box;
}

body {
  font-family: arial;
}

.ka {
  cursor: not-allowed;
}

.hidden{
  display: none;
}

input {
  border: 1px solid #afafaf;
  padding: 5px;
}

.ka input {
  pointer-events: none;
  background-color: #f1f1f1;
}

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

th {
  text-align: center;
  font-size: 12px;
}

label {
  margin: 0 5px 0 0;
  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($(this).data('sav') - 1);
  } else {
    $(this).val('');
    $(this).data('value', '');
    setInputValue($(this).data('sav') - 1);
  }
});
$("input[type='text']").keyup(function(){	
	var num = $(this).val().replace(/[^0-9.]/g, "");
	$(this).val(num);
});
function setInputValue(dsId) {
  var obj = ('#sav' + dsId),
	 toObj = ('#sav' + dsId +'to');
    nextObj = $('#sav' + (parseInt(dsId) + 1)),
    objDataVal =  $(obj).data('value');
  if (parseInt($(nextObj).data('value')) > 0) {
    $(obj).val(objDataVal);
    $(toObj).val($(nextObj).data('value') - 1);
  } else {
    $(obj).val(objDataVal);
    $(toObj).val('');
  }
}
//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