我如何动态添加表格行

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

  • 在jQuery中添加表格行31个答案

  • 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>
    
    链接地址: http://www.djcxy.com/p/22965.html

    上一篇: How can I dynamically add table rows

    下一篇: add a new row in a table