从表中已排序的数字列表中查找数字的位置
Find the position of a number from a list of sorted numbers in a table
我试图从表中的输入值列表中找到输入值的位置,然后显示该位置。这是在对值从最高值到最低值进行排序之后。
在下面的例子中,我期望值为10的输入是位置2。类似地,如果我用值为45的输入来测试它,那么位置将是1,依此类推
我已经尝试了下面的代码,但我得到了-1位置
<script type="text/javascript">
// Get the values as numbers
var marks = document.getElementsByClassName('sm');
var valArr = Array.prototype.map.call(marks, function(el) {
return parseInt(el.value)
});
// Sort value array in descending order
var marks = valArr.sort(function(a, b) {
return b - a
});
</script>
<table id="tableID" width="200" border="1">
<tr>
<td width="122" class="">
<input name="name" class="sm" id="sm" type="text" value="4" />
</td>
<td width="62" class="pos"></td>
</tr>
<tr>
<td class="">
<input name="name" class="sm" id="sm1" type="text" value="6" />
</td>
<td class="pos1"></td>
</tr>
<tr>
<td class="">
<input name="name" class="sm" id="sm2" type="text" value="10" />
</td>
<td class="pos2">
<script type="text/javascript">
var marksID = document.getElementById('sm2').value;
var mark = parseInt(marksID);
var valPos = marks.indexOf(mark);
document.getElementsByClassName('pos2')[0].textContent = valPos;
</script>
</td>
</tr>
<tr>
<td class="">
<input name="name" class="sm" id="sm3" type="text" value="45" />
</td>
<td class="pos3"></td>
</tr>
<tr>
<td class="">
<input name="name" class="sm" id="sm4" type="text" value="1" />
</td>
<td class="pos4"></td>
</tr>
</table>
必须在加载页面后调用javascript。
把代码放在你身体元素的末尾:
</body>
<script type="text/javascript">
(function() {
var marksID = document.getElementById('sm2').value;
var mark = parseInt(marksID);
var valPos = marks.indexOf(mark);
document.getElementsByClassName('pos2')[0].textContent = valPos;
})();
</script>
我明白了。按照Steven p对其中一条评论的建议,使用DOMContentLoaded。这是我制作的演示。从最高到最低排序后,表示列表中数字位置的好方法。
<table id="tableID" width="200" border="1">
<tr>
<td width="122" class=""> <input name="name" class="sm" id="sm" type="text" value="4" /> </td>
<td width="62" class="pos"></td>
</tr>
<tr>
<td class=""> <input name="name" class="sm" id="sm1" type="text" value="6" /> </td>
<td class="pos1"> </td>
</tr>
<tr>
<td class=""> <input name="name" class="sm" id="sm2" type="text" value="10" /> </td>
<td class="pos2">
</td>
</tr>
<tr>
<td class=""> <input name="name" class="sm" id="sm3" type="text" value="6" /> </td>
<td class="pos3">
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
var marksID3 = document.getElementById('sm3').value;
var mark3 = parseInt(marksID3);
//alert (mark3)
var valPos3 = marks.indexOf(mark3);
var valPost3 = parseInt(valPos3 + 1);
document.getElementsByClassName('pos3')[0].textContent = valPost3;
});
</script></td>
</tr>
<tr>
<td class=""> <input name="name" class="sm" id="sm4" type="text" value="45" /> </td>
<td class="pos4">
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
var marksID4 = document.getElementById('sm4').value;
var mark4 = parseInt(marksID4);
//alert (mark4)
var valPos4 = marks.indexOf(mark4);
var valPost4 = parseInt(valPos4 + 1);
document.getElementsByClassName('pos4')[0].textContent = valPost4;
});
</script></td>
</tr>
</table>
<script type="text/javascript">
// Get the values as numbers
var marks = document.getElementsByClassName('sm');
var valArr = Array.prototype.map.call(marks, function(el) {
return parseInt(el.value)
});
// Sort value array in descending order
var marks = valArr.sort(function(a, b) {
return b-a
});
</script>
如果有任何其他好的建议或改进,我将高度赞赏
相关文章:
- Javascript中的正则表达式,用于只有数字的字符串,并且不应在除数字以外的任何位置包含任何字符
- 在输出数字的千分之一位置插入逗号
- REGEX (javascript) - 允许字母数字字符中的特殊字符不在第一个位置
- 使用 javascript 在网页上的同一位置更新数字
- 为什么由于数组中数字1的位置,我会从函数中得到不同的结果
- Javascript如何找到数组中的最大数字,并记录位置
- 在没有数组的4位数字中交换数字的位置
- Javascript:将数字的位置值分开
- 返回最低数字的数组位置(非负数)
- 使用输入类型数字获取光标位置
- 改变字符串中字母和数字的位置(顺序)
- 对一串数字进行排序,每个数字里面都有一个字母.确保在原始数组中保持相同的重复项位置
- 如何找到一个数字的数字缩放到他们的位置
- 将字符串中的数字在特定位置相乘
- 获取带模数的数字的位置值
- 为什么用逗号显示的数字是错误的位置
- 获取数组中第n个最小数字的位置
- 找到特定位置的数字
- JavaScript找出数字开始的位置并添加标记
- 如何更换一部分窗口.位置与随机生成的数字