javascriptsortingranking
Sort array of integers and display value on inputs
I have a website with a lot of input fields and I'd like to sort the datas inside them.
As you can see, I'd like to sort the column of total scores and have the position on the MVP input field. To do this, I thought to use the javascript function .sort();.
function sortmvp() {
var mvp = new Array();
mvp[0] = parseInt(document.getElementById('p1_5h').value);
mvp[1] = parseInt(document.getElementById('p2_5h').value);
mvp[2] = parseInt(document.getElementById('p3_5h').value);
mvp[3] = parseInt(document.getElementById('p4_5h').value);
mvp[4] = parseInt(document.getElementById('p5_5h').value);
mvp[5] = parseInt(document.getElementById('p6_5h').value);
mvp.sort();
}
Those p1_5h, p2_5h, p1_5h... are the inputs of the Total column. At this point I only have sorted the datas on my array but I have to display them.
The problem is that I don't know how to display the correct positions (1,2,3,4...) in the correct input as you can see in the image above. Any suggestion?
Here you can see the HTML code of the table: http://jsfiddle.net/ajLLU/1/
HTML
<fieldset class="a" style="width:90%">
<legend><b>Individuals</b>
</legend>
<div style="height:240px;width:100%;overflow-y:scroll; border:1px solid #D8D8D8;">
<form name="individszsz" action="individuals.js, update_gps();">
<table id="tabini11" border="0" align="center" style="width:550px">
<tr>
<td width="100px" valign="bottom">
<p align="center"><b> Home Clan </b>
</p>
</td>
<td valign="bottom" width="50px">
<p align="center"><b>GP1</b>
</p>
</td>
<td valign="bottom" width="50px">
<p align="center"><b>GP2</b>
</p>
</td>
<td valign="bottom" width="50px">
<p align="center"><b> GP3 </b>
</p>
</td>
<td valign="bottom" width="50px">
<p align="center"><b> Total</b>
</p>
</td>
<td valign="bottom" width="50px">
<p align="center"><b> Average</b>
</p>
</td>
<td valign="bottom">
<p align="center"><b> MVP</b>
</p>
</td>
</tr>
<tr>
<td width="80px" valign="bottom">
<input id="p1_1h" type="text" name="p1_1h" value="" style="width:100%">
</td>
<td valign="bottom" width="40px">
<input id="p1_2h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p1_3h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p1_4h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p1_5h" type="text" value="0" readonly style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p1_6h" type="text" value="0" readonly style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="mvp1" type="text" value="0" readonly style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
</tr>
<tr>
<td width="80px" valign="bottom">
<input id="p2_1h" type="text" value="" style="width:100%">
</td>
<td valign="bottom" width="40px">
<input id="p2_2h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p2_3h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p2_4h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p2_5h" type="text" value="0" readonly style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p2_6h" type="text" value="0" readonly style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="mvp2" type="text" value="0" readonly style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
</tr>
<tr>
<td width="80px" valign="bottom">
<input id="p3_1h" type="text" value="" style="width:100%">
</td>
<td valign="bottom" width="40px">
<input id="p3_2h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p3_3h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p3_4h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p3_5h" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p3_6h" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="mvp3" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();">
</td>
</tr>
<tr>
<td width="80px" valign="bottom">
<input id="p4_1h" type="text" value="" style="width:100%">
</td>
<td valign="bottom" width="40px">
<input id="p4_2h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p4_3h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p4_4h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p4_5h" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p4_6h" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="mvp4" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();">
</td>
</tr>
<tr>
<td width="80px" valign="bottom">
<input id="p5_1h" type="text" value="" style="width:100%">
</td>
<td valign="bottom" width="40px">
<input id="p5_2h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p5_3h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p5_4h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p5_5h" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p5_6h" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="mvp5" type="text" value="0" style="width:100" readonly onchange="individuals(); update_gps(); calc();">
</td>
</tr>
<tr>
<td width="80px" valign="bottom">
<input id="p6_1h" type="text" value="" style="width:100%">
</td>
<td valign="bottom" width="40px">
<input id="p6_2h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p6_3h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p6_4h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p6_5h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p6_6h" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="mvp6" type="text" value="0" style="width:100" readonly onchange="individuals(); update_gps(); calc();">
</td>
</tr>
</table>
<table id="tabini12" border="0" align="center" style="width:550px">
<tr>
<td width="80px" valign="bottom">
<p align="center"><b> Versus Clan </b>
</p>
</td>
<td valign="bottom" width="40px">
<p align="center"><b>GP1</b>
</p>
</td>
<td valign="bottom" width="40px">
<p align="center"><b>GP2</b>
</p>
</td>
<td valign="bottom" width="40px">
<p align="center"><b> GP3 </b>
</p>
</td>
<td valign="bottom" width="40px">
<p align="center"><b> Total</b>
</p>
</td>
<td valign="bottom" width="40px">
<p align="center"><b> Average</b>
</p>
</td>
<td valign="bottom" width="40px">
<p align="center"><b> MVP</b>
</p>
</td>
</tr>
<tr>
<td width="80px" valign="bottom">
<input id="p1_1o" type="text" name="p1_1h" value="" style="width:100%">
</td>
<td valign="bottom" width="40px">
<input id="p1_2o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p1_3o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p1_4o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p1_5o" type="text" value="0" style="width:100%" readonlyonchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p1_6o" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="mvp7" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();">
</td>
</tr>
<tr>
<td width="80px" valign="bottom">
<input id="p2_1o" type="text" value="" style="width:100%">
</td>
<td valign="bottom" width="40px">
<input id="p2_2o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p2_3o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p2_4o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p2_5o" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p2_6o" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="mvp8" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();">
</td>
</tr>
<tr>
<td width="80px" valign="bottom">
<input id="p3_1o" type="text" value="" style="width:100%">
</td>
<td valign="bottom" width="40px">
<input id="p3_2o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p3_3o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p3_4o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p3_5o" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p3_6o" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="mvp9" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();">
</td>
</tr>
<tr>
<td width="80px" valign="bottom">
<input id="p4_1o" type="text" value="" style="width:100%">
</td>
<td valign="bottom" width="40px">
<input id="p4_2o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p4_3o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p4_4o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p4_5o" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p4_6o" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="mvp10" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();">
</td>
</tr>
<tr>
<td width="80px" valign="bottom">
<input id="p5_1o" type="text" value="" style="width:100%">
</td>
<td valign="bottom" width="40px">
<input id="p5_2o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p5_3o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p5_4o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p5_5o" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p5_6o" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="mvp11" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();">
</td>
</tr>
<tr>
<td width="80px" valign="bottom">
<input id="p6_1o" type="text" value="" style="width:100%">
</td>
<td valign="bottom" width="40px">
<input id="p6_2o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p6_3o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p6_4o" type="text" value="0" style="width:100%" onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p6_5o" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="p6_6o" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();">
</td>
<td valign="bottom" width="40px">
<input id="mvp12" type="text" value="0" style="width:100%" readonly onchange="individuals(); update_gps(); calc();">
</td>
</tr>
</table>
</form>
</div>
</fieldset>
Javascript
function calc() {
var h1 = parseInt(document.getElementById('h1').value);
var h2 = parseInt(document.getElementById('h2').value);
var h3 = parseInt(document.getElementById('h3').value);
var o1 = parseInt(document.getElementById('o1').value);
var o2 = parseInt(document.getElementById('o2').value);
var o3 = parseInt(document.getElementById('o3').value);
var toth = h1 + h2 + h3;
var toto = o1 + o2 + o3;
document.getElementById('htot').value = toth;
document.getElementById('otot').value = toto;
document.getElementById('diff1').value = h1 - o1;
document.getElementById('diff2').value = h2 - o2;
document.getElementById('diff3').value = h3 - o3;
document.getElementById('difftot').value = toth - toto;
htot = document.getElementById('htot');
otot = document.getElementById('otot');
if (htot.value == otot.value) {
htot.style.color = 'blue';
otot.style.color = 'blue';
} else {
if (htot.value > otot.value) {
htot.style.color = 'green';
otot.style.color = 'red';
} else {
otot.style.color = 'green';
htot.style.color = 'red';
}
}
var totals = [],
indices = [];
for (var i = 0, i < 6; i++) {
totals[i] = parseInt(document.getElementById('p' + (i + 1) + '_5h').value, 10);
indices[i] = i;
}
indices.sort(function (a, b) {
return totals[a] - totals[b];
});
for (var i = 0; i < indices.length; i++)
document.getElementById('mvp' + (indices[i] + 1)).value = (i + 1);
}
Solution
Actually you don't want to sort the total values, but their indices by the respective value. That way you still know which index belongs to which field.
var totals = [],
indices = [];
for (var i=0; i<6; i++) {
totals[i] = parseInt(document.getElementById('p'+(i+1)+'_5h').value, 10);
indices[i] = i;
}
indices.sort(function(a, b) {
return totals[a] - totals[b];
});
for (var i=0; i<indices.length; i++)
document.getElementById('mvp'+(indices[i]+1)).value = (i+1);
- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices