Question

我有2个div：div with submit和order-content div

    <div class="order">
        <form>
        <div class="input">submit</div>
        </form>
        
        <div class="order-content">
        <table><tr><td></td></tr></table>
          <div class="new-product">
              <div class="product-add">
                  <form>
                  </form>
              </div>
          </div>
       </div>
    </div>

另外，当我添加新产品时，我追加新的表格行，所以css position属性不能正常工作，因为它有静态值。我想制作得到新行高度的jquery并递增提交输入位置，但是有更好的解决方案吗？

Answer 1

您需要使用JavaScript将DOM中的元素移动到与原始文档中显示的顺序不同的顺序。像（jsfiddle with jQuery）：

https://jsfiddle.net/khabgc6h/2/

$('.input').insertAfter('.new-product')

Answer 2

$(".input").click(function(){
	$("#table").append('<tr><td>Data</td></tr>')
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="order">
 <div  class="col-xs-12 form-group">
 
 </div>
        <div class="col-xs-12 form-group">
        <button class="btn input">
        submit
        </button></div>
        
        <div class="col-xs-12 order-content">
        <table id="table" class="form-group"><tr><td>Data</td></tr></table>
          <div class="new-product">
              <div class="product-add">
                  <form>
                  <input type="text" class="form-control" />
                  </form>
              </div>
          </div>
       </div>
    </div>

将div置于另一个div下

2 个答案: