У меня есть код HTML
<link href="css.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Вибір розміру одягу</title>
<script type="text/javascript" src="js/bd_jq.js"></script>
<script type="text/javascript" src="js/indexJS.js"></script>
</head>
<body>
<form id="form">
<input type="text" size="10" id="grud" value="" />
<input type="text" size="10" id="taliya" value="" />
<input type="text" size="10" id="bedra" value="" />
<!--
<input type="submit" value="ОК" id="subm" size="10" style="padding:10px; width:60px" />
-->
<br>
</form>
<hr>
<table id="mytable" width="380" border="1" >
<tbody>
<tr>
<th><p>Обхват одягу</p></th>
<th><p>Обхват грудей</p></th>
<th><p>Обхват талії</p></th>
<th><p>Обхват бедр</p></th>
</tr>
<tr>
<td class="size"><p>XS</p></td>
<td><p class="grud">80</p></td>
<td><p class="taliya">62</p></td>
<td><p class="bedra">86</p></td>
</tr>
<tr>
<td class="size"><p>S</p></td>
<td><p class="grud">84</p></td>
<td><p class="taliya">66</p></td>
<td><p class="bedra">92</p></td>
</tr>
<tr>
<td class="size"><p>M</p></td>
<td><p class="grud">88</p></td>
<td><p class="taliya">70</p></td>
<td><p class="bedra">96</p></td>
</tr>
<tr>
<td class="size"><p>L</p></td>
<td><p class="grud">92</p></td>
<td><p class="taliya">74</p></td>
<td><p class="bedra">100</p></td>
</tr>
<tr>
<td class="size"><p>XL</p></td>
<td><p class="grud">96</p></td>
<td><p class="taliya">78</p></td>
<td><p class="bedra">104</p></td>
</tr>
<tr>
<td class="size"><p>XXL</p></td>
<td><p class="grud">100</p></td>
<td><p class="taliya">82</p></td>
<td><p class="bedra">108</p></td>
</tr>
<tr>
<td class="size"><p>XXXL</p></td>
<td><p class="grud">104</p></td>
<td><p class="taliya">86</p></td>
<td><p class="bedra">112</p></td>
</tr>
</tbody>
</table>
но мне нужно в js что бы при вводе данных своего размера высветливался самый подходящий.
Все работает, код js ниже, но вот когда я ввожу значение 100 или больше тогда индекс тега всегда приравнивается к 0.Почему и как это решить.
Код js ниже.
grudIndex = null;
taliyaIndex = null;
bredraIndex = null;
window.table = {
SIZE : [],
GRUD : [],
TALIYA : [],
BEDRA : [],
init: function(){
$('#mytable td .size').each(function(){
table.SIZE.push($(this).text());
});
$('#mytable td .grud').each(function(){
table.GRUD.push($(this).text());
});
$('#mytable td .taliya').each(function(){
table.TALIYA.push($(this).text());
});
$('#mytable td .bedra').each(function(){
table.BEDRA.push($(this).text());
});
},
}
$(document).ready(function() {
window.table.init();
$('#grud').keyup(function(){
$.each(window.table.GRUD, function(index, val){
if( $('#grud').val() <= val){
grudIndex = index;
return false;
}
})
console.log("Елемент " + grudIndex + " груді");
});
$('#taliya').keyup(function(){
$.each(window.table.TALIYA, function(index, val){
if( $('#taliya').val() <= val){
taliyaIndex = index;
return false;
}
})
console.log("Елемент " + taliyaIndex + " талії");
});
$('#bedra').keyup(function(){
$.each(window.table.BEDRA, function(index, val){
if( $('#bedra').val() <= val){
bredraIndex = index;
return false;
}
})
console.log("Елемент " + bredraIndex + " бедр");
});
$('#bedra').keyup(function(){
if( window.grudIndex >= 0 && window.taliyaIndex >= 0 && window.bredraIndex >= 0 ) {
MaxINDEX = Math.max(window.grudIndex, window.taliyaIndex, window.bredraIndex);
console.log("Максимальний індекс " + MaxINDEX);
$('.size').eq(MaxINDEX).addClass('active');
}
})
});
