quang cao hosting

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

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

9 điểm   ( 4 đá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ỏ. 2.25/10 1214

Thảo luận:

  • avatar
    @ hoaiduyentran - 17:04, 28/08/2018

    Khó quá à mấy anh ơi @@

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

File tương tự

Files cùng mục

 
Hỗ trợ kỹ thuật cho thành viên:
Số di động (Hotline): 085.99999.25
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
File gợi ý cho bạn
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: 085.99999.25;