Làm cách nào để tự động thêm các hàng của bảng

Question

Tôi đang sử dụng khung nền tảng 5 (không chắc chắn rằng vấn đề đó có quan trọng không). Tôi sẽ chuyển tất cả thông tin đến một trang khác, vì vậy điều quan trọng là mỗi CELL là một mục/giá trị phân biệt cá nhân khi tôi chuyển nó, nhưng tôi không chắc chắn về cách bắt đầu vấn đề này. Nó sẽ thêm một hàng khác mỗi khi thêm được nhấn. Cũng vậy với Xóa.

Có ai có thể hướng dẫn tôi cách tiếp cận điều này không? Đây là những gì tôi đánh dấu lên trông:

<a href="#" class="button>Add line</a> 
<a href="#" class="button>Delete line</a> 

<div style="width:98%; margin:0 auto"> 
    <table align="center"> 
     <thead> 
      <tr> 
       <th>Status</th> 
       <th>Campaign Name</th> 
       <th>URL Link</th> 
       <th>Product</th> 
       <th>Dates (Start to End)</th> 
       <th>Total Budget</th> 
       <th>Daily Budget</th> 
       <th>Pricing Model</th> 
       <th>Bid</th> 
       <th>Targeting Info</th> 
       <th>Total Units</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>df</td> 
       <td>dfd</td> 
       <td>fdsd</td> 
       <td>fdsfd</td> 
       <td>dsf</td> 
       <td>dd</td> 
       <td>dd</td> 
       <td>dd</td> 
       <td>dd</td> 
       <td>dd</td> 
       <td>dd</td> 
      </tr> 
     </tbody> 
    </table> 
    </div> 

Answer 1

HTML (giả sử các thead không thay đổi):

<a href="#" class="button" id="add">Add line</a> 
<a href="#" class="button" id="delete">Delete line</a> 

<div style="width:98%; margin:0 auto"> 
    <table align="center" id="table"> 
     <thead> 
      <tr> 
       <th id="0">Status</th> 
       <th id="1">Campaign Name</th> 
       <th id="2">URL Link</th> 
       <th id="3">Product</th> 
       <th id="4">Dates (Start to End)</th> 
       <th id="5">Total Budget</th> 
       <th id="6">Daily Budget</th> 
       <th id="7">Pricing Model</th> 
       <th id="8">Bid</th> 
       <th id="9">Targeting Info</th> 
       <th id="10">Total Units</th> 
      </tr> 
     </thead> 
     <tbody> 

     </tbody> 
    </table> 
</div> 

JavaScript:

<script type="text/javascript"> 
<!-- 
    var line_count = 0; 
    //Count the amount of <th>'s we have 
    var header_count = $('#table > thead').children('th').length - 1; 

    $(document).ready(function() { 
     $('#add').click(function() { 
      //Create a new <tr> ('line') 
      $('#table > tbody').append('<tr></tr>'); 

      //For every <th>, add a <td> ('cell') 
      for(var i = 0; i < header_count; i++) { 
       $('#table > tbody > tr:last-child').append('<td id="'+ line_count +'_'+ i +'"></td>'); 
      } 

      line_count++; //Keep track of how many lines were added 
     }); 

     //Now you still need a function for deleting. 
     //You could add a button to every line which deletes its parent <tr>. 
    }); 
--> 
</script>