jqueryを使用して入力からhtmlテーブルに行を追加するには？

Question

jQueryを使用して入力からHTMLテーブルに行を追加しようとしています。

アイデアは、HTML入力から値を取得し、それを表の行として追加することです。 「ステップを追加」ボタンをクリックすると、入力が追加されますが、テーブルが表示されて消えます！
どうすれば解決できますか？

HTML：

<form class="col-md-offset-1"> 
    <div class="form-group"> 
     <select class="selectpicker" name="operation" id="operation"> 
      <option value="Add">Add</option> 
      <option value="Minus">Minus</option> 
      <option value="Multiply">Multiply</option> 
      <option value="Divide">Divide</option> 
     </select> 

     <input type="number" name="value" id="value" /> 
     <button type="button" class="btn btn-secondary" id="add_step">Add step</button> 
    </div> 

    <div class=""> 
     <table id="table_op" bgcolor="#B0BEC5"> 
      <tr> 
       <td></td> 
       <td></td> 
       <td></td> 
      </tr> 
     </table> 
    </div> 
    <hr> 
    <div class="form-group col-md-4"> 
     <button type="submit" class="btn btn-primary" id="submit_btn" name="submit" value="submit" >Calculate</button> 
     <button type="reset" class="btn btn-danger" id="reset_btn" name="reset" value="reset" >Reset</button> 
    </div> 
    </form> 

JS：コメントで指摘されたとして、それがちょうどゼロからページをリロードするよう

<script type="text/javascript"> 
    var index = 1; 
    $("#add_step").click(function(){ 

     $('#table_op').append('<tr><td></td><td></td><td></td></tr>'); 
     $('table tr:last td:eq(0)').html(index+'. '); 
     $('table tr:last td:eq(1)').html($("#operation").val()); 
     $('table tr:last td:eq(2)').html($("#value").val()); 
     index++; 
     location.reload(); 
    }); 
</script> 

Answer 1

、location.reload()はあなたのコードであってはなりません。

submitボタンを使用しないでください。データをどこにも送信していないため、計算を単純にしようとしているので、通常のbuttonが必要です。さらに、button要素では、要素にフォームと共に送信する必要があるデータが含まれないため、value属性を指定する必要はありません。

さらに、bgcolorはHTML属性として有効ではなくなりました。すべてのスタイリングはCSSで行う必要があります。

また、あなたのHTMLは有効ではありません（余分な終了はdivです）。

最後に、コードを最初に準備して最後に追加すると、新しい行を追加するコードをもっと簡単にすることができます。

var index = 1; 
 
    
 
$("#add_step").click(function(){ 
 
    var op = $("#operation").val(); 
 
    var val = $("#value").val(); 
 
    $('#table_op').append('<tr><td>' + index + '. ' + '</td><td>' + op + '</td><td>' + val + '</td></tr>'); 
 
    index++; 
 
});

table, td { 
 
    border:1px solid #fff; 
 
} 
 
#table_op { 
 
    border-collapse:collapse; 
 
    background-color:#B0BEC5; 
 
} 
 

 
td { 
 
    margin:3px; 
 
    padding:3px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="col-md-offset-1"> 
 
    <div class="form-group"> 
 
    <select class="selectpicker" name="operation" id="operation"> 
 
     <option value="Add">Add</option> 
 
     <option value="Minus">Minus</option> 
 
     <option value="Multiply">Multiply</option> 
 
     <option value="Divide">Divide</option> 
 
    </select> 
 
    
 
    <input type="number" name="value" id="value" /> 
 
    <button type="button" class="btn btn-secondary" id="add_step">Add step</button> 
 
    </div> 
 
    <div class=""> 
 
    
 
    <table id="table_op"></table> 
 
    </div> 
 
    <hr> 
 
    
 
    <div class="form-group col-md-4"> 
 
    <button type="button" class="btn btn-primary" id="submit_btn" name="calculate">Calculate</button> 
 
    <button type="reset" class="btn btn-danger" id="reset_btn" name="reset">Reset</button> 
 
    </div> 
 
</form>

Answer 2

location.reload()機能は、ページを再読み込みします。

データを永続化していない場合は、 `reload（） '関数を削除することができます。

location.reload()