• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

jQuery实现动态添加标签事件

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
纯JavaScript实现猜数字游戏发布时间:2022-02-05
下一篇:
用javascript实现简单计算器发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap