从表格中的已排序数字列表中查找数字的位置

时间:2016-07-29 19:50:59

标签: javascript jquery sorting dom indexof

我试图从表格中的输入值列表中找到输入值的位置,然后显示位置。这是在将值从最高值排序到最低值之后。

在下面的示例中,我希望值为10的输入为位置2.同样,如果我使用值为45的输入对其进行测试,则位置将为1,依此类推。

我已经尝试过下面的代码,但我得到了-1位置



<mapping class="com.searchresults.CarProduct"/>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

您必须在加载页面后调用您的javascript。

将该代码放在body元素的末尾:

</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>

答案 1 :(得分:0)

我想出来了。DOMContentLoaded根据其中一条评论的建议使用Steven P。这是我所做的演示。从最高到最低排序后,在列表中说出数字位置的好方法。

<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>

如果有任何其他好的建议或改进,我将非常感谢