Javascript - 入力に応じてテーブルを変更してください

Question

私は質問を検索して同様のものを見つけましたが、関連するものは何も見つかりませんでした。

私はインターンシップで、私はJavascriptを使用しているプラ​​ットフォームで作業しています。

私は値のセットを持っており、入力を入力する必要があります。この入力に応じて表を塗りつぶす必要があります（つまり値が< =入力行のままにしてください）

キャッチは、ページをリロードしたくありません。ユーザーが入力を入力すると、ページを更新せずにテーブルを変更します。

私は本当にこれで苦労しています、誰でも私を助けることができますか？

私が理解するところでは、入力を読み取るには最初のJavascript関数が必要です。次に、私の値を閲覧し、入力に合ったリストを記入するための2番目のもの。最後に、この値のそれぞれに対して表の行を表示するための3番目のものがあります。ここで

は例です：私のフォーム

<form id="bottomForm"> 
     <fieldset> 
      <label for="asking_dist">Distance range (Kb)</label> 
      <input id="asking_dist" type="text" size="5" name="asking_dist"/> 
     </fieldset> 

    </form>   

私はその入力を取得する最初のJavascript機能を必要とする、など

どうやって進めることができますか？

Answer 1

function someStuff() 
 
{ 
 
\t var value = document.getElementById('asking_dist').value; //Textbox value 
 
    var html = '<tr><td>'+value+'</td><tr>' 
 
    $('#tdata').append(html); 
 
    document.getElementById('asking_dist').value = ''; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="bottomForm"> 
 
    <fieldset> 
 
    <label for="asking_dist">Distance range (Kb)</label> 
 
    <input id="asking_dist" type="text" size="5" name="asking_dist"/> 
 
    <input type="button" value="Append" onClick="someStuff(this.value);"> 
 
    </fieldset> 
 
</form> 
 
<table id="tdata" border = "2"> 
 
    <tr><th>Value</th></tr> 
 
</table>

私たちはあなたが何をしているかを理解するためjsfiddle（それをグーグル）、セットアップ