脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery动态添加标签事件

jQuery实现动态添加标签事件

 更新时间：2021年08月15日 08:54:45   作者：来干了这碗代码  
这篇文章主要为大家详细介绍了jQuery实现动态添加标签事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

您可能感兴趣的文章:

相关文章

  • jquery制作select列表双向选择示例代码

    jquery制作select列表双向选择示例代码

    看着标题就知道它是什么意思了，select列表双向选择，jquery制作的，兼容性肯定是不错的
    2014-09-09
  • jquery做个日期选择适用于手机端示例

    jquery做个日期选择适用于手机端示例

    本篇文章主要介绍了jquery做个日期选择适用于手机端示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • jquery中动态效果小结

    jquery中动态效果小结

    只需引入jqery.js,不需要引入插件，利用jquery定义的一些基本方法，就能实现诸如隐藏，显示，淡入，淡出，半透明等
    2010-12-12
  • JQuery将字符串转为json对象的四种方法

    JQuery将字符串转为json对象的四种方法

    本文主要介绍了JQuery将字符串转为json对象的四种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • jQuery获取(选中)单选,复选框,下拉框中的值

    jQuery获取(选中)单选,复选框,下拉框中的值

    本篇文章主要是对jQuery获取(选中)单选,复选框,下拉框中的值的实现方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-02-02
  • jQuery自定义添加

    jQuery自定义添加"$"与解决"$"冲突的方法

    这篇文章主要介绍了jQuery自定义添加"$"与解决"$"冲突的方法,介绍了用户自定义添加“$”扩展jQuery功能的方法,以及解决"$"冲突的技巧,需要的朋友可以参考下
    2015-01-01
  • jquery使用jquery.zclip插件复制对象的实例教程

    jquery使用jquery.zclip插件复制对象的实例教程

    这篇文章主要介绍了jquery使用jquery.zclip插件复制对象的实例教程，当然也可以复制输入框input、textarea等内容，下面看代码
    2013-12-12
  • 3kb jQuery代码搞定各种树形选择的实现方法

    3kb jQuery代码搞定各种树形选择的实现方法

    下面小编就为大家带来一篇3kb jQuery代码搞定各种树形选择的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • jQuery中width()方法用法实例

    jQuery中width()方法用法实例

    这篇文章主要介绍了jQuery中width()方法用法,以实例形式较为详细的分析了width()方法获取元素宽度的技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • 详解jQuery中的DOM操作

    详解jQuery中的DOM操作

    本文主要对jQuery中的DOM操作进行了详细全面的介绍。文中举了简单例子，便于理解与学习，对初学者具有很好的参考价值，需要的朋友一起来看下吧
    2016-12-12

最新评论