对整数数组进行排序并在输入上显示值
我有一个包含大量输入字段的网站，我想对其中的数据进行排序。
正如您所看到的，我想对总分数列进行排序，并在MVP输入字段中占据一席之地。为此，我想使用javascript函数.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();
}
这些p1_5h，p2_5h，p1_5h ...是总计列的输入。此时我只对数组中的数据进行了排序，但我必须显示它们。
问题在于我不知道如何在正确的输入中显示正确的位置（1,2,3,4 ...），如上图所示。有什么建议吗？
您可以在此处查看表格的HTML代码：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);
}
2 个答案:
答案 0 :(得分：1)
实际上，您不希望对总值进行排序，但是它们的索引按相应的值排序。这样你仍然知道哪个索引属于哪个字段。
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);
答案 1 :(得分：0)
好的，与@Bergi接受的答案相同的原则我带了你的jsfiddle并清理它（删除内联的Javascript和CSS），希望它会给你更多的想法，并提出了以下工作示例。
CSS
fieldset.a {
width: 90%;
}
fieldset.a legend {
font-weight: bold;
}
fieldset.a > div:nth-of-type(1) {
height: 240px;
width: 100%;
overflow-y: scroll;
border :1px solid #D8D8D8;
}
fieldset.a table {
border: 0;
text-align: center;
width: 550px;
}
fieldset.a td {
vertical-align: bottom;
text-align: center;
font-weight: bold;
}
fieldset.a thead td:nth-of-type(1) {
width: 100px;
}
fieldset.a thead td:nth-of-type(2) {
width: 50px;
}
fieldset.a thead td:nth-of-type(3) {
width: 50px;
}
fieldset.a thead td:nth-of-type(4) {
width: 50px;
}
fieldset.a thead td:nth-of-type(5) {
width: 50px;
}
fieldset.a thead td:nth-of-type(6) {
width: 50px;
}
fieldset.a thead td:nth-of-type(7) {
width: 50px;
}
fieldset.a input {
width: 100%;
}
HTML
<fieldset class="a">
<legend>Individuals</legend>
<div>
<form name="individszsz" action="">
<table id="tabini11">
<thead>
<tr>
<td>Home Clan</td>
<td>GP1</td>
<td>GP2</td>
<td>GP3</td>
<td>Total</td>
<td>Average</td>
<td>MVP</td>
</tr>
</thead>
<tboby>
<tr>
<td>
<input id="p1_1h" type="text" name="p1_1h">
</td>
<td>
<input id="p1_2h" type="text">
</td>
<td>
<input id="p1_3h" type="text">
</td>
<td>
<input id="p1_4h" type="text">
</td>
<td>
<input id="p1_5h" type="text" readonly>
</td>
<td>
<input id="p1_6h" type="text" readonly>
</td>
<td>
<input id="mvp1" type="text" readonly>
</td>
</tr>
<tr>
<td>
<input id="p2_1h" type="text">
</td>
<td>
<input id="p2_2h" type="text">
</td>
<td>
<input id="p2_3h" type="text">
</td>
<td>
<input id="p2_4h" type="text">
</td>
<td>
<input id="p2_5h" type="text" readonly>
</td>
<td>
<input id="p2_6h" type="text" readonly>
</td>
<td>
<input id="mvp2" type="text" readonly>
</td>
</tr>
<tr>
<td>
<input id="p3_1h" type="text">
</td>
<td>
<input id="p3_2h" type="text">
</td>
<td>
<input id="p3_3h" type="text">
</td>
<td>
<input id="p3_4h" type="text">
</td>
<td>
<input id="p3_5h" type="text" readonly>
</td>
<td>
<input id="p3_6h" type="text" readonly>
</td>
<td>
<input id="mvp3" type="text" readonly>
</td>
</tr>
<tr>
<td>
<input id="p4_1h" type="text">
</td>
<td>
<input id="p4_2h" type="text">
</td>
<td>
<input id="p4_3h" type="text">
</td>
<td>
<input id="p4_4h" type="text">
</td>
<td>
<input id="p4_5h" type="text" readonly>
</td>
<td>
<input id="p4_6h" type="text" readonly>
</td>
<td>
<input id="mvp4" type="text" readonly>
</td>
</tr>
<tr>
<td>
<input id="p5_1h" type="text">
</td>
<td>
<input id="p5_2h" type="text">
</td>
<td>
<input id="p5_3h" type="text">
</td>
<td>
<input id="p5_4h" type="text">
</td>
<td>
<input id="p5_5h" type="text" readonly>
</td>
<td>
<input id="p5_6h" type="text" readonly>
</td>
<td>
<input id="mvp5" type="text" readonly>
</td>
</tr>
<tr>
<td>
<input id="p6_1h" type="text">
</td>
<td>
<input id="p6_2h" type="text">
</td>
<td>
<input id="p6_3h" type="text">
</td>
<td>
<input id="p6_4h" type="text">
</td>
<td>
<input id="p6_5h" type="text">
</td>
<td>
<input id="p6_6h" type="text">
</td>
<td>
<input id="mvp6" type="text" readonly>
</td>
</tr>
</tboby>
</table>
<table id="tabini12">
<thead>
<tr>
<td>Versus Clan</td>
<td>GP1</td>
<td>GP2</td>
<td>GP3</td>
<td>Total</td>
<td>Average</td>
<td>MVP</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input id="p1_1o" type="text" name="p1_1h">
</td>
<td>
<input id="p1_2o" type="text">
</td>
<td>
<input id="p1_3o" type="text">
</td>
<td>
<input id="p1_4o" type="text">
</td>
<td>
<input id="p1_5o" type="text" readonly">
</td>
<td>
<input id="p1_6o" type="text" readonly>
</td>
<td>
<input id="mvp7" type="text" readonly>
</td>
</tr>
<tr>
<td>
<input id="p2_1o" type="text">
</td>
<td>
<input id="p2_2o" type="text">
</td>
<td>
<input id="p2_3o" type="text">
</td>
<td>
<input id="p2_4o" type="text">
</td>
<td>
<input id="p2_5o" type="text" readonly>
</td>
<td>
<input id="p2_6o" type="text" readonly>
</td>
<td>
<input id="mvp8" type="text" readonly>
</td>
</tr>
<tr>
<td>
<input id="p3_1o" type="text">
</td>
<td>
<input id="p3_2o" type="text">
</td>
<td>
<input id="p3_3o" type="text">
</td>
<td>
<input id="p3_4o" type="text">
</td>
<td>
<input id="p3_5o" type="text" readonly>
</td>
<td>
<input id="p3_6o" type="text" readonly>
</td>
<td>
<input id="mvp9" type="text" readonly>
</td>
</tr>
<tr>
<td>
<input id="p4_1o" type="text">
</td>
<td>
<input id="p4_2o" type="text">
</td>
<td>
<input id="p4_3o" type="text">
</td>
<td>
<input id="p4_4o" type="text">
</td>
<td>
<input id="p4_5o" type="text" readonly>
</td>
<td>
<input id="p4_6o" type="text" readonly>
</td>
<td>
<input id="mvp10" type="text" readonly>
</td>
</tr>
<tr>
<td>
<input id="p5_1o" type="text">
</td>
<td>
<input id="p5_2o" type="text">
</td>
<td>
<input id="p5_3o" type="text">
</td>
<td>
<input id="p5_4o" type="text">
</td>
<td>
<input id="p5_5o" type="text" readonly>
</td>
<td>
<input id="p5_6o" type="text" readonly>
</td>
<td>
<input id="mvp11" type="text" readonly>
</td>
</tr>
<tr>
<td>
<input id="p6_1o" type="text">
</td>
<td>
<input id="p6_2o" type="text">
</td>
<td>
<input id="p6_3o" type="text">
</td>
<td>
<input id="p6_4o" type="text">
</td>
<td>
<input id="p6_5o" type="text" readonly>
</td>
<td>
<input id="p6_6o" type="text" readonly>
</td>
<td>
<input id="mvp12" type="text" readonly>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</fieldset>
的Javascript
function calc(e) {
var target = e.target,
inputs = target.parentNode.parentNode.getElementsByTagName("input"),
allTbodyInputs = target.parentNode.parentNode.parentNode.getElementsByTagName("input"),
length = 4,
positions = [],
total = 0,
average,
i;
for (i = 1; i < length; i += 1) {
total += parseInt(inputs[i].value, 10) || 0;
}
average = total / 3;
inputs[4].value = total;
inputs[5].value = average.toFixed(2);
for (i = 0, length = allTbodyInputs.length; i < length; i += 1) {
if (/^p\d_6[ho]$/.test(allTbodyInputs[i].id)) {
positions.push({
element: allTbodyInputs[i + 1],
value: parseFloat(allTbodyInputs[i].value) || 0
});
}
}
positions.sort(function (a, b) {
if (a.value === b.value) {
return 0;
}
if (a.value > b.value) {
return -1;
}
return 1;
})
for (i = 0, length = positions.length; i < length; i += 1) {
positions[i].element.value = i + 1;
}
}
var onChangeInputs = document.getElementsByTagName("input"),
length,
index;
for (index = 0, length = onChangeInputs.length; index < length; index += 1) {
if (/^p\d_[234][ho]$/.test(onChangeInputs[index].id)) {
onChangeInputs[index].addEventListener("change", calc, false);
}
}
在 jsfiddle
上
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？