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

Posted 2023-02-22

【中文标题】如何动态添加表行[重复]

【英文标题】：How can I dynamically add table rows [duplicate]

【发布时间】：2014-01-03 06:11:17

【问题描述】：

我正在使用基础 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>

【问题讨论】：

所以，请帮助我理解，问题是这样的：您打算将此表中的每个单元格传递到另一个页面，但您需要一种方法来分别访问/引用每个单元格？跨度>

查看htmlTableElement，html5 中不推荐使用 align 属性。

@Floris，是的。因为我会在下一页“重新打印”所有内容。

@Givi 提问者使用的是使用 jQuery 的 Zurb Foundation 5。 foundation.zurb.com/docs/javascript.html

您可以给每个 row 一个 id="0" (or 1, 2, etc)，然后每个 cell 一个 id id="0_0" (or 0_1, 0_2, 0_3, 1_0, 1_1, etc) 以便每个单元对应于某一行。

【参考方案1】：

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>