Hướng dẫn tạo add và remove div động trong jQuery

Xem: 523    Tải: 0   Thảo luận: 0   Mục: Tài liệu tham khảo   Lĩnh vực: Khác

9 điểm   ( 2 đánh giá ) File đã được kiểm thử


Trong hướng dẫn này, tôi sẽ giải thích cho bạn cách thêm và loại bỏ div động trong jQuery. Toàn bộ kịch bản có thể được hiểu với sự giúp đỡ của một chương trình nhỏ. Chúng tôi sẽ tạo ra một container trong các hình thức của một phần tử DIV. Chúng tôi sẽ đưa hai hộp văn bản bên trong DIV và hai nút ngoài div thêm và loại bỏ các div sử dụng jQuery. Bây giờ tạo một thư mục tên Test trong localhost của bạn và tạo ra file index.php trong thư mục. Bạn cần phải thêm jQuery CDN trên đầu trang của các bạn nộp để tải jQuery.
Dưới đây là các mã. Bao gồm các mã bên trong file index.php

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    alert("hello");
       var counter = 2;
       $("#addbutton").click(function(){
           
                     var newTextBoxDiv = $(document.createElement('div')).attr("id",'TextBoxDiv' + counter);
                     newTextBoxDiv.after().html('<label>Deal </label> '+counter+'<br><input type="text" id="textbox'+counter+'" name="v_deals[]"  class ="form-control" value=""><br><label>Location</label><br> <input type="text" id="textbox'+counter+'" name="v_location[]"  class ="form-control" value="">');
                     newTextBoxDiv.appendTo("#TextBoxesGroup");
                     counter++;
              });
       $("#removeButton").click(function () {
                      if(counter==1){
                      alert("No more textbox to remove");
                      return false;
             }  
              counter--; 
              $("#TextBoxDiv" + counter).remove();
 
    });
});

 
</script>
</head>
</body>
       <div id='TextBoxesGroup'>
 
       <label>Deal 1</label><br>
 
       <input type="text" id="textbox" name="v_deals[]"  class ="form-control" value=""><br>
 
       <label>Location</label><br>
 
       <input type="text" id="textbox" name="v_location[]"  class ="form-control" value="">
 
       </div><br><input type="button" class = "btn btn-primary" id="addbutton" value="Add DIV"><br>
       <input type="button" class = "btn btn-primary" id="removeButton" value="Remove DIV"><br><br>
 
 </body>
 </html>

Bây giờ chạy sao chép và dán URL sau trong trình duyệt của bạn. http: // localhost / Kiểm tra
Bạn có thể thêm và loại bỏ các DIV động.
Hy vọng bài viết nhỏ này sẽ giúp bạn hiểu làm thế nào để thêm và loại bỏ div động trong jQuery.

Hướng dẫn tạo add và remove div động trong jQuery

Hướng dẫn tạo add và remove div động trong jQuery Đăng ngày 15-02-2016  Trong hướng dẫn này, tôi sẽ giải thích cho bạn cách thêm và loại bỏ div động trong jQuery. Toàn bộ kịch bản có thể được hiểu với sự giúp đỡ của một chương trình nhỏ. 4.5/10 523

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+844) 6. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn