मैं तालिका पंक्तियों को गतिशील रूप से कैसे जोड़ सकता हूं

Question

मैं नींव 5 ढांचे का उपयोग कर रहा हूं (यकीन नहीं है कि यह महत्वपूर्ण है)। मैं सभी जानकारी किसी अन्य पृष्ठ पर भेजूंगा, इसलिए यह बहुत महत्वपूर्ण है कि प्रत्येक सेल एक अलग पहचानने योग्य वस्तु/मूल्य है जब मैं इसे पास करता हूं, लेकिन मुझे यकीन नहीं है कि इस समस्या को कैसे शुरू किया जाए। हर बार हिट जोड़ने पर इसे एक और पंक्ति जोड़नी चाहिए। हटाएं के लिए भी चला जाता है।

क्या कोई मुझे इस बारे में मार्गदर्शन करने के लिए मार्गदर्शन कर सकता है? यहाँ क्या मेरी निशान को खोजता है:

<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 परिवर्तन नहीं करता है):

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

जावास्क्रिप्ट:

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