jQuery追加tr到table中

作者: 零一间 | 来源:发表于2017-10-13 13:10 被阅读130次

jQuery追加tr到table中
使用jquery追加table行
jquery实现jsp中的table中行tr的增加和删除
Html/CSS----表格与表单
前端charts常用小结
6
表格
表单表格
表格、表格样式、长表格、表格的布局、表单
表格表单

<html>
    <head>
    <style> 
        table {
            border:1px solid #ccc
        } 
        table td {
            border:1px solid #ccc
        } 
    </style> 
        <script src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"  ></script>
        <script>

            require.config({
                paths: {
                    "jquery": 
                    [
                        "https://cdn.staticfile.org/jquery/2.2.2/jquery.min", 
                        <!-- cdn加载失败后，加载本地-->
                        "js/jquery.min"
                    ]
                }
            });
            require(['jquery'],function($){

                $("#prepend_btn").click(function() {
                    $("#test-table tbody").prepend('<tr><td>hc1</td><td>hc2</td><td>hc3</td>td></tr>');
                });
                $("#append_btn").click(function() {
                    $("#test-table tbody").append('<tr><td>fc1</td><td>fc2</td><td>fc3</td></tr>');
                });
            
            })
        </script>
        
    </head>
    <body>
        <table id = "test-table">
            <thead>
                <tr><th>column 1</th><th>column 2</th><th>column 3</th></tr>
            </thead>
            <tbody>
                <tr>
                    <td>c1</td><td>c2</td><td>c3</td>
                </tr>
            </tbody>     
            </table>
        <input type="button" id="prepend_btn" value="在开头增加">
        <input type="button" id="append_btn" value="在末尾增加">
    </body>
</html>