<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="JQuery/jquery-1.11.0.js"></script>
        <script type="text/javascript">
            $().ready(function() {
                $("#addPassenger").click(function() {
                    var tr1 = document.createElement("tr");
                    var td1 = document.createElement("td");
                    var input1 = document.createElement("input");
                    input1.type = "text";
                    input1.id = "in1";
                    $(td1).append(input1);
                    var td2 = document.createElement("td");
                    var btn = document.createElement("input");
                    btn.type = "button";
                    btn.name = "dongtai";
                    $(btn).val("delete");
                    $(td2).append(btn);
                    $(tr1).append(td1);
                    $(tr1).append(td2);
                    $("#tbody").append(tr1);
                });
                $("#jingtai").click(function() {
                    $("#jingtai").parent().parent().remove();
                });
                
                $("td").delegate("input", "click", function() {
                    alert("dong");
                    $(this).parent().parent().remove();
                });
                
                $("div").delegate("p", "click", function() {
                    alert("P_dong");
                    $(this).slideToggle();
                });
                $("button").click(function() {
                    $("<p>这是一个新段落。</p>").insertAfter("button");
                });
            });
        </script>
    </head>
    <body>
        <input type="button" name="" id="addPassenger" value="添加" />
        <!--<button id="add" type="button">添加btn</button>-->
        <br>
        <table id="tbody" border="" cellspacing="" cellpadding="">
            <tr>
                <th>姓名</th>
                <th>删除</th>
            </tr>
            <tr>
                <td>静态添加1</td>
                <td>
                    <input id="jingtai" type="button" value="静态添加1" />
                </td>
            </tr>
            <tr>
                <td>静态添加2</td>
                <td>
                    <input id="jingtai" type="button" value="静态添加2" />
                </td>
            </tr>
        </table>
        <div style="background-color:yellow">
            <p>这是一个段落。</p>
            <p>请点击任意一个 p 元素，它会消失。包括本段落。</p>
            <button>按钮后面插 p 元素</button>
            <p>这是后面一个段落。</p>
            <p>这是后面一个段落。</p>
        </div>
        <p><b>注释：</b>通过使用 delegate() 方法，而不是 live()，只有 div 元素中的 p 元素会受到影响。</p>
        </div>
    </body>
</html>