您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax |

jQuery实现动态添加标签事件

51自学网 2022-05-02 21:34:38
  javascript

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

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


纯JavaScript实现猜数字游戏
用javascript实现简单计算器
51自学网,即我要自学网,自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1