（htmlの入力値をルーピングする）

Question

私はレコードを表示しようとしていて、特定のレコードを表示できるようにしています。レコードはPythonで集められます。 ユーザーが特定のレコードのアプリケーションIDをクリックすると、そのレコードの詳細を照会するためにアプリケーションIDを使用するために、アプリケーションIDを保管したいと考えています。

私は、pythonから集められたすべてのレコードがhtmlテーブルに表示されるループを持っています。各レコードのアプリケーションIDが正しく表示されます。しかし、アプリケーションIDのボタンをクリックしてデータを保存しようとすると、表示される最初のレコードのアプリケーションIDが常に保存されます。たとえば、最初のアプリケーションIDは3、2番目は13です.13をクリックすると3が格納されます。 これがなぜ正しく表示されているのかわかりません。私はイメージがついています。 ご協力いただければ幸いです。

マイHTML：

<tbody> 
       {% for row in rows %} 
       <tr> 
        <td> 
        <input type='button' name="number" id = 'number' type="submit" onclick="initStorage()" value = {{row.id}} ></input> 
        </td> 
        <td>{{ row.name }}</td> 
        <td>{{ row.email }}</td> 
        <td>{{ row.phone }}</td> 
       </tr> 
       {% endfor %} 
</tbody> 

マイJavascriptを：

[<script type = 'text/javascript'> 
    function initStorage() { 
    function saveNumber() { 
     var number = document.getElementById('number'); 
     localStorage.setItem('number', number.value); 
     alert(localStorage.getItem('number')); 
    } 
    saveNumber(); 
    } 

</script>][1] 

Photo of issue: select application 13, but it wants to store 3

Answer 1

[<script type = 'text/javascript'> 
 
     function initStorage(val) { 
 
     function saveNumber() {   
 
      localStorage.setItem('number', val); 
 
      alert(localStorage.getItem('number')); 
 
     } 
 
     saveNumber(); 
 
     } 
 
    
 
    </script>]

<tbody> 
 
        {% for row in rows %} 
 
        <tr> 
 
         <td> 
 
         <input type='button' name="number" id = 'number' type="submit" onclick="initStorage({{row.id}})" value = {{row.id}} ></input> 
 
         </td> 
 
         <td>{{ row.name }}</td> 
 
         <td>{{ row.email }}</td> 
 
         <td>{{ row.phone }}</td> 
 
        </tr> 
 
        {% endfor %} 
 
    </tbody>

私はボタンが必要に押されていない場合、あなたが直接値を渡しているunderstand.This方法に少し楽にあなたのコードを作りましたjqueryを使用してアクセスします。

もう1つの解決策は、id='number'の代わりにクラスを使用することです。 class='number'このようなonclick関数を使わずにjqueryのクリックでアクセスしてください。

$('.number').on('click',function(){ 
    var number = $(this).val(); 
}); 

Answer 2

idタグrepresents a unique element。あなたのコードがvalue属性を正しく更新しているにもかかわらず、DOMに登録されている要素は1つだけです（number）。この登録は、id="number"（この場合は3）とレンダリングされた最初の要素の値をとっています。

の中の要素を検索するのではなく、クリックされた要素のプロパティを取得するために、の引数としてthisを使用します。また、各要素に固有のIDを付けます。これを行うためにプログラムでサフィックスを追加できます（他にもたくさんの方法があります）。このセクションで要素の参照先がidで終わっていない場合でも、idタグを一意にすることは良い習慣です。

ここで実証するためのフィドルます：https://jsfiddle.net/kwu7oLju/