2016-07-29 4 views
0

テーブルの入力値のリストから入力値の位置を見つけようとしていますが、その位置を表示しようとしています。これは、値を最高値から最低値にソー​​トした後です。テーブル内のソートされた数値のリストから数値の位置を求める

以下の例では、値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>

+0

に理解するであろう任意の他の良い提案や改善点がある場合はあなたの最初のスクリプトは、 '' document.getElementsByClassName( 'SM')との任意の要素を見つけることができません、テーブルが解析される前にスクリプトが実行されるためです。あなたがアクセスしようとする要素の後に '

0

コメントの一つにSteven Pによって示唆されているように私は.Using 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) { 
 
\t 
 
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>

私は非常に

関連する問題