javascript創建具有不同屬性的html

這是 laravel 資料庫的輸入表，我想在用戶按下按鈕時重新生成這個 div控制器外觀

<div class="container-fluid" style="display:block" id="div1">
<div class="fade-in">
<div class="card">
<div class="card-header"> pricing </div>
{{-- {{ $locations->name }} --}}
<script>
counter  =1;
  
</script>
<div class="card-body">                      
      <div class="body">

        <div class="form-group">
          <label for="exampleFormControlInput1">car number</label>
          <input type="text" class="form-control" name="carnumber" id="exampleFormControlInput1" placeholder="car number">
        </div>   
        <div class="form-group">
          <label for="exampleFormControlInput1">price</label>
          <input type="text" class="form-control" name="price" id="exampleFormControlInput1" placeholder="price">
        </div>  
        <div class="form-group">
          <label for="exampleFormControlInput1">min day</label>
          <input type="text" class="form-control" name="minday" id="exampleFormControlInput1" placeholder="min day">
        </div>  
        <div class="form-group">
          <label for="exampleFormControlInput1">sale price</label>
          <input type="text" class="form-control" name="saleprice" id="exampleFormControlInput1" placeholder="sale price">
        </div>  
        <div class="form-group">
          <label for="exampleFormControlInput1">min day stay</label>
          <input type="text" class="form-control" name="mindaystay" id="exampleFormControlInput1" placeholder="min day stay">
        </div>  
        

</div>
</div>
</div>
</div>
</div>

uj5u.com熱心網友回復：

我猜你是這個意思

我把標簽包起來，所以你也不需要號碼

注意我在名稱中添加了 []，這樣您的服務器將收到一組值

$(function() {
  $("#add").on("click", function() {
   const $div = $("#div1 .card").eq(0).clone(true)
    $div.find('input').each(function() {
      this.value="";
    })
    $("#div1").append($div)
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button type="button" id="add">ADD</button>
<div class="container-fluid" style="display:block" id="div1">
  <div class="fade-in">
    <div class="card">
      <div class="card-header"> pricing </div>
      <div class="card-body">
        <div class="body">
          <div class="form-group">
            <label>car number
              <input type="text" class="form-control" name="carnumber[]" placeholder="car number">
            </label>
          </div>
          <div class="form-group">
            <label>price
              <input type="text" class="form-control" name="price[]" placeholder="price">
            </label>
          </div>
          <div class="form-group">
            <label>min day
              <input type="text" class="form-control" name="minday[]" placeholder="min day">
            </label>
          </div>
          <div class="form-group">
            <label>sale price
              <input type="text" class="form-control" name="saleprice[]" placeholder="sale price">
            </label>
          </div>
          <div class="form-group">
            <label>min day stay
              <input type="text" class="form-control" name="mindaystay[]" placeholder="min day stay">
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

如果你必須：

$(function() {
  $("#add").on("click", function() {
    const $div = $("#div1 .card").eq(0).clone(true);
    const idx = $("#div1 .card").length;
    $div.find('input').each(function() {
      this.value="";
      this.name = this.name.replace(/\[(\d )\]/,idx)
    })
    $("#div1").append($div)
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button type="button" id="add">ADD</button>
<div class="container-fluid" style="display:block" id="div1">
  <div class="fade-in">
    <div class="card">
      <div class="card-header"> pricing </div>
      <div class="card-body">
        <div class="body">
          <div class="form-group">
            <label>car number
                  <input type="text" class="form-control" name="carnumber[0]" placeholder="car number">
                </label>
          </div>
          <div class="form-group">
            <label>price
                  <input type="text" class="form-control" name="price[0]" placeholder="price">
                </label>
          </div>
          <div class="form-group">
            <label>min day
                  <input type="text" class="form-control" name="minday[0]" placeholder="min day">
                </label>
          </div>
          <div class="form-group">
            <label>sale price
                  <input type="text" class="form-control" name="saleprice[0]" placeholder="sale price">
                </label>
          </div>
          <div class="form-group">
            <label>min day stay
                  <input type="text" class="form-control" name="mindaystay[0]" placeholder="min day stay">
                </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

標籤：javascript html 查询 拉拉维尔

上一篇：JQuery文本函式未顯示文本

下一篇：“AppendTo”href在AndroidChrome中不起作用？