テーブル行を動的に追加する方法

Question

私は基礎5のフレームワークを使用しています（重要であれば分かりません）。私は別のページにすべての情報を渡すので、各CELLは私がそれを渡すときに個々の識別可能な項目/値であることが非常に重要ですが、この問題をどのように開始するかについてはわかりません。 addがヒットするたびに別の行が追加されるはずです。削除でも同じです。

誰も私にこのアプローチ方法を教えてもらえますか？

<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

（ theadが変化しないと仮定した場合）

HTML：：

<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>