Javascript Thêm hàng vào bảng HTML & ID tăng dần

Question

Đây là bài đăng đầu tiên của tôi trên trang web này để hy vọng bạn sẽ dễ dàng với tôi. Tôi đang cố gắng tạo một biểu mẫu HTML/PHP và sử dụng một đoạn mã Javascript nhỏ để thêm các hàng bổ sung vào một bảng khi một nút được nhấp và tăng ID cho hai trường.

Nút hoạt động trong việc thêm các hàng tuy nhiên dường như không tăng ID, chỉ cần sử dụng cùng một ID với hàng trước đó. Hy vọng rằng ai đó có thể giúp đỡ?

$(window).load(function(){ 
 
     var table = $('#productanddates')[0]; 
 

 
    var newIDSuffix = 2; 
 
    $(table).delegate('#button2', 'click', function() { 
 
     var thisRow = $(this).closest('tr')[0]; 
 

 
     var cloned = $(thisRow).clone(); 
 
     cloned.find('input, select').each(function() { 
 
      var id = $(this).attr('id'); 
 
      id = id.substring(0, id.length - 1) + newIDSuffix; 
 
      $(this).attr('id', id); 
 
     }); 
 

 
     cloned.insertAfter(thisRow).find('input:date').val(''); 
 

 
     newIDSuffix++; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="blue-bar ta-l"> 
 
    <div class="container"> 
 
     <h1>Submit Your Insurance Renewal Date(s)</h1> 
 
    </div> 
 
</div> 
 
<div class="grey-bar"> 
 
    <div class="container"> 
 
     <div class="rounded-box"> 
 
      <div> 
 
       <label for="name">Name</label> 
 
       <input type="text" id="name" name="name" autocomplete="off" required /> 
 
      </div> 
 
      <div> 
 
       <label for="name">Renewal Dates</label> 
 
      </div> 
 
      <table width="100%" border="0" cellspacing="0" cellpadding="5" id="productanddates" class="border"> 
 
        <tr> 
 
         <td> 
 
          <select name="insurance_type1" id="insurance_type1"> 
 
           <option></option> 
 
           <option>Car</option> 
 
           <option>Home</option> 
 
           <option>Van</option> 
 
           <option>Business</option> 
 
           <option>GAP</option> 
 
           <option>Travel</option> 
 
          </select> 
 
         </td> 
 
         <td> 
 
          <input type="date" name="renewal_date1" id="renewal_date1" /> 
 
         </td> 
 
         <td> 
 
          <input type="button" name="button2" id="button2" value="+" /> 
 
         </td> 
 
        </tr> 
 
      </table> 
 
      <div> 
 
       <label for="telephone_number">Contact Number</label> 
 
       <input type="tel" id="telephone_number" name="telephone_number" pattern="\d{11}" autocomplete="off" required /> 
 
      </div> 
 
      <div> 
 
       <label for="email">Email Address</label> 
 
       <input type="email" id="email" name="email" autocomplete="off" required /> 
 
      </div> 
 
      <div> 
 
       <input name="submit" type="submit" value="Submit" class="btn"> 
 
      </div> 
 
     </div>

Answer 1

Tôi đã đi trước một cú đâm vào một phiên bản sạch hơn về những gì tôi nghĩ rằng bạn đang cố gắng hoàn thành. Tôi sẽ đi bộ qua các bản cập nhật lớn:

1. Cập nhật vào nút id và name từ "button2" thành "button1" - Tôi cho rằng bạn sẽ muốn giữ lại các chỉ số đồng bộ trên các đầu vào trong mỗi hàng .
2. Thay đổi $(window).load(function() { thành $("document").ready(function() { - Trong khi một trong hai sẽ hoạt động, trước đây sẽ chờ cho đến khi tất cả hình ảnh đã tải xong, trong khi sau đó sẽ kích hoạt khi DOM hoàn thành tòa nhà. Trừ khi bạn THỰC SỰ muốn các hình ảnh để tải đầu tiên, tôi khuyên bạn nên $("document").ready(), để kích hoạt nhanh hơn của mã.
3. Xóa tài liệu [0] - lý do chính để sử dụng [0] sau bộ sưu tập bộ chọn jQuery là tham chiếu phiên bản DOM của phần tử jQuery đã chọn, để chúng tôi có phương thức JavaScript "vanilla". Trong mọi trường hợp, bạn đã rwapping các biến trong $(...), mà chỉ cần chuyển đổi các yếu tố DOM trở lại vào một đối tượng jQuery, do đó, bước thêm là không cần thiết.
4. Đã thay đổi phương thức .delegate() thành .on() - như Howard Renollet lưu ý, đó là phương pháp chính xác để sử dụng cho các phiên bản hiện đại của jQuery.Lưu ý rằng thông số "sự kiện" và "mục tiêu" đã đổi vị trí trong on, từ nơi chúng ở trong số delegate.
5. Đã thay đổi mục tiêu sự kiện từ #button2 thành :button - điều này sẽ đảm bảo rằng tất cả các nút trong hàng mới cũng sẽ cho phép bạn thêm hàng bổ sung chứ không phải hàng đầu tiên.
6. Đã chuyển mục tiêu clone từ hàng được nhấp vào hàng cuối cùng trong bảng - điều này sẽ giúp giữ cho số của bạn được xếp hàng và theo thứ tự tăng dần. Hàng nhân bản sẽ luôn là hàng cuối cùng, bất kể một cái nào đã được nhấp và hàng mới sẽ luôn được đặt ở cuối, sau hàng đó.
7. Thay đổi chỉ mục để sử dụng chỉ mục của hàng cuối cùng làm cơ sở cho hàng mới và sử dụng cụm từ thông dụng để xác định nó - với bảng đang được đặt hàng ngay bây giờ, bạn luôn có thể đếm trên hàng cuối cùng để có chỉ mục cao nhất . Bằng cách sử dụng cụm từ thông dụng /^(.+)(\d+)$/i, bạn có thể chia giá trị chỉ mục thành "mọi thứ trước chỉ mục" và "chỉ mục (tức là, trên hoặc nhiều số, ở cuối giá trị)". Sau đó, bạn chỉ cần tăng chỉ số lên 1 và gắn lại nó, cho giá trị mới. Sử dụng cách tiếp cận regex cũng cho phép bạn dễ dàng điều chỉnh, nó có bao giờ nhận được nhiều hơn 9 hàng (tức là các chỉ mục hai chữ số).
8. Cập nhật cả id và name thuộc tính cho mỗi đầu vào - Tôi cho rằng bạn sẽ muốn id và name thuộc tính là như nhau đối với mỗi yếu tố cá nhân, dựa trên hàng ban đầu, và, bạn chỉ cập nhật id trong mã của bạn, điều này sẽ gây ra sự cố khi gửi dữ liệu.
9. Đã thay đổi $("input:date") thành $("input[type='date']) - như Mouser đã chỉ ra, đây thực sự là lý do chính khiến mã của bạn không thành công, ban đầu. Tất cả các thay đổi khác sẽ giúp bạn tránh các vấn đề khác trong tương lai hoặc chỉ đơn giản là "thay đổi liên quan đến chất lượng mã".

Vì vậy,. . . đó là những cập nhật chính. :) Hãy cho tôi biết nếu tôi hiểu lầm những gì bạn đang cố gắng làm hoặc nếu bạn có bất kỳ câu hỏi nào.

$("document").ready(function() { 
 
\t $('#productanddates').on('click', ':button', function() { 
 
\t \t var lastRow = $(this).closest('table').find("tr:last-child"); 
 

 
\t \t var cloned = lastRow.clone(); 
 
\t \t cloned.find('input, select').each(function() { 
 
\t \t \t var id = $(this).attr('id'); 
 
\t \t \t 
 
\t \t \t var regIdMatch = /^(.+)(\d+)$/; 
 
\t \t \t var aIdParts = id.match(regIdMatch); 
 
\t \t \t var newId = aIdParts[1] + (parseInt(aIdParts[2], 10) + 1); 
 

 
\t \t \t $(this).attr('id', newId); 
 
\t \t \t $(this).attr('name', newId); 
 
\t \t }); 
 

 
\t \t cloned.find("input[type='date']").val(''); 
 
\t \t cloned.insertAfter(lastRow); 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="blue-bar ta-l"> 
 
    <div class="container"> 
 
     <h1>Submit Your Insurance Renewal Date(s)</h1> 
 
    </div> 
 
</div> 
 
<div class="grey-bar"> 
 
    <div class="container"> 
 
     <div class="rounded-box"> 
 
      <div> 
 
       <label for="name">Name</label> 
 
       <input type="text" id="name" name="name" autocomplete="off" required /> 
 
      </div> 
 
      <div> 
 
       <label for="name">Renewal Dates</label> 
 
      </div> 
 
      <table width="100%" border="0" cellspacing="0" cellpadding="5" id="productanddates" class="border"> 
 
        <tr> 
 
         <td> 
 
          <select name="insurance_type1" id="insurance_type1"> 
 
           <option></option> 
 
           <option>Car</option> 
 
           <option>Home</option> 
 
           <option>Van</option> 
 
           <option>Business</option> 
 
           <option>GAP</option> 
 
           <option>Travel</option> 
 
          </select> 
 
         </td> 
 
         <td> 
 
          <input type="date" name="renewal_date1" id="renewal_date1" /> 
 
         </td> 
 
         <td> 
 
          <input type="button" name="button1" id="button1" value="+" /> 
 
         </td> 
 
        </tr> 
 
      </table> 
 
      <div> 
 
       <label for="telephone_number">Contact Number</label> 
 
       <input type="tel" id="telephone_number" name="telephone_number" pattern="\d{11}" autocomplete="off" required /> 
 
      </div> 
 
      <div> 
 
       <label for="email">Email Address</label> 
 
       <input type="email" id="email" name="email" autocomplete="off" required /> 
 
      </div> 
 
      <div> 
 
       <input name="submit" type="submit" value="Submit" class="btn"> 
 
      </div> 
 
     </div>

Answer 2

cloned.insertAfter(thisRow).find('input:date').val(''); 

Dòng này là không đúng. Nó sẽ ném một lỗi invalid selector.

Bạn cần phải thay đổi nó thành:

cloned.insertAfter(thisRow).find('input[type="date"]').val(''); 

jQuery thực sự không hỗ trợ :INPUT-TYPE format trong selectors, nhưng không phải là loại HTML5 đầu vào mới (chưa): nên sử dụng input[type="date"] đây là cách chính xác cho bây giờ để chọn một phần tử có loại HTML5. Xin lưu ý các dấu ngoặc kép xung quanh giá trị. Nếu bạn muốn chọn một thuộc tính với một giá trị nhất định.

Tổng quan về bộ chọn của bộ chọn css tại đây: W3schools.

Vì dòng này đang ném một lỗi của bạn, newIDSuffix không bao giờ được cập nhật, bởi vì tập lệnh tạm dừng ở dòng trước đó do lỗi tập lệnh.

---

@Charlietfl tăng điểm hợp lệ về việc tìm hiểu thêm về lớp học và truyền tải DOM. Tuy nhiên điều đó sẽ không sửa mã này. Hoặc giải thích lý do mã của bạn không hoạt động. Tuy nhiên đó là một mẹo tốt.

Answer 3

cloned.insertAfter(thisRow).find('input[type="date"]').val('');