当前位置 博文首页 > 文章内容

    jQuery实现动态添加标签事件

    作者:shunshunshun18 栏目:未分类 时间:2021-08-15 14:44:21

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客,有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦,IIS7站长博客,全站内容图片下架、并积极应诉
    博文内容全部不再显示,请需要相关资讯的站长朋友到必应搜索。谢谢!

    另祝:版权碰瓷诈骗团伙,早日弃暗投明。

    相关新闻:借版权之名、行诈骗之实,周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹!百花齐放的时代,渐行渐远!



    本文实例为大家分享了jQuery实现动态添加标签事件的具体代码,供大家参考,具体内容如下

    代码:

    <body>
        <table id="tableID" border="1" align="center" width="60%">
            <tr>
                <th>用户名</th>
                <th>密码</th>
                <th>操作</th>
            </tr>
            <tbody id="tbodyID"></tbody>
        </table>
        <hr />
        用户名:
        <input type="text" id="usernameID" /> 密码:
        <input type="text" id="passwordID" />
        <input type="button" value="增加" id="addID" />
    </body>
    <script type="text/javascript">
        //定位"增加"按钮,同时添加单击事件
        $("#addID").click(function() {
            //获取用户名和密码的值
            var username = $("#usernameID").val();
            var password = $("#passwordID").val();
            //去掉二边的空格
            username = $.trim(username);
            password = $.trim(password);
            //如果用户名或密码没有填
            if (username.length == 0 || password.length == 0) {
                //提示用户                  
                alert("用户名或密码没有填");
            } else {
                //创建1个tr标签
                var $tr = $("<tr></tr>");
                //创建3个td标签
                var $td1 = $("<td>" + username + "</td>");
                var $td2 = $("<td>" + password + "</td>");
                var $td3 = $("<td></td>");
                //创建input标签,设置为删除按钮
                var $del = $("<input type='button' value='删除'>");
                //为删除按钮动态添加单击事件
                $del.click(function() {
                    //删除按钮所有的行,即$tr对象
                    $tr.remove();
                });
                //将删除按钮添加到td3标签中
                $td3.append($del);
                //将3个td标签依次添加到tr标签中
                $tr.append($td1);
                $tr.append($td2);
                $tr.append($td3);
                //将tr标签添加到tbody标签中
                $("#tbodyID").append($tr);
                //清空用户名和密码文本框中的内容
                $("#usernameID").val("");
                $("#passwordID").val("");
            }
        });
    </script>

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持IIS7站长之家博文。