如何动态添加表行[重复]

This question already has an answer here:

这个问题在这里已有答案:

• Add table row in jQuery 32 answers

在jQuery 32答案中添加表行

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.

我正在使用基础5框架(不确定是否重要)。我将把所有信息传递到另一个页面,所以当我通过它时,每个CELL是一个可区分的项目/值是非常重要的,但我不确定如何开始这个问题。每次添加时都应该添加另一行。删除也是如此。

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>

1 个解决方案

#1

HTML (assuming the thead doesn't change):

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>