jQuery追加tr到table中

<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>
image.png

国内静态资源公共库

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,820评论 25 708
  • 差点都要睡着了,还好手机突然叫唤了一下,才惊醒过来还未写今天的作业。今天的课也没有听,打开了一下子却觉得太吵了。...
    D061张琴阅读 89评论 0 0
  • 劝君一杯酒,更做两代人。 鱼肉富贵食,男儿钱刀为? 琼浆赠穷家,拦怀爱之非。 大世安得我,光明寄于谁?
    流浪诗徒阅读 245评论 0 0
  • 《结构思考力》一书是由李忠秋老师著。李忠秋老师是结构思考力学院创始人,首席培训师。 看书前先看了前言,开篇从“最强...
    依然如水阅读 252评论 0 2