我如何動態添加表格行

我正在使用基金會5框架（不知道是否重要）。我會將所有信息傳遞給另一個頁面，因此當我通過它時，每個CELL都是個別可區分的項目/值是非常重要的，但我不確定如何開始解決此問題。每添加一次，它都應該添加一行。刪除也一樣。我如何動態添加表格行

任何人都可以指導我如何處理這個？這裏是我的標記的外觀：

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

來源

2013-12-15 Ebad Saghar

所以，幫助我理解，問題是這就是：你將把這個表中的每個單元格傳遞給另一個頁面，但是你需要一種方法來分別訪問/引用每個單元格？ – Floris

查看[HTMLTableElement]（https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement），並且align屬性在HTML5中被棄用。 – Givi

@弗洛里斯，是的。因爲我會在下一頁「重印」所有內容。 –

HTML（假設thead不改變）：

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

來源

2013-12-15 23:31:31 Floris

我如何動態添加表格行

回答

相關問題