如何使用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()