如何动态添加表行

How can I dynamically add table rows

本文关键字：添加 动态 何动态      更新时间：2023-09-26

我使用的是foundation 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>

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>
相关文章：