How can I dynamically add table rows

Question

I'm using foundation 5 framework (not sure if that matters). I will be passing all information to another page, so it's very important that each CELL is an individual distinguishable item/value when I do pass it, but I'm not sure on how to start on this problem. It should add another row every time add is hit. Same goes for Delete.

Can anyone guide me on how to approach this? Here is what my mark up looks:

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

So, help me understand, the problem is this: you are going to pass every cell in this table to another page, but you need a way to access/refer to every single cell separately? — Floris, Dec 15 '13 at 23:05
Look at [HTMLTableElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement), and align attribute was deprecated in HTML5. — Givi, Dec 15 '13 at 23:07
@Floris, yes. Because I would "reprint" everything back on the next page. — Ebad Saghar, Dec 15 '13 at 23:08
By the way, each cell will be an input from the user, I hardcoded things for this example. — Ebad Saghar, Dec 15 '13 at 23:09
@Givi The questioner is using Zurb Foundation 5 which uses jQuery. http://foundation.zurb.com/docs/javascript.html — Pervez Choudhury, Dec 15 '13 at 23:11
You could give each **row** an `id="0" (or 1, 2, etc)` and then each **cell** an id `id="0_0" (or 0_1, 0_2, 0_3, 1_0, 1_1, etc)` so that each cell corresponds to a certain row. — Floris, Dec 15 '13 at 23:12
@Floris - but it needs to be done dynamically... there is an add and delete row feature. — Ebad Saghar, Dec 15 '13 at 23:13
@EbadSaghar Well yes, when I said "you could" I meant "you could let JS or jQuery" :-) Let me whip up a quick snippet of code for you. — Floris, Dec 15 '13 at 23:13

score 6 · Accepted Answer · answered Dec 15 '13 at 23:31

HTML (assuming the thead doesn't change):

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

How can I dynamically add table rows

1 Answers1