jQuery implements dynamic tag event

This article shares the specific code of jQuery to dynamically add tag events for your reference. The specific content is as follows

Code:

<body>
    <table id="tableID" border="1" align="center" width="60%">
        <tr>
            <th>Username</th>
            <th>Password</th>
            <th>Operation</th>
        </tr>
        <tbody id="tbodyID"></tbody>
    </table>
    <hr />
    username:
    <input type="text" id="usernameID" /> Password:
    <input type="text" id="passwordID" />
    <input type="button" value="Add" id="addID" />
</body>
<script type="text/javascript">
    //Locate the "Add" button and add a click event $("#addID").click(function() {
        //Get the values of username and password var username = $("#usernameID").val();
        var password = $("#passwordID").val();
        //Remove spaces on both sides username = $.trim(username);
        password = $.trim(password);
        //If the username or password is not filled in if (username.length == 0 || password.length == 0) {
            //Prompt the user alert("Username or password is not filled in");
        } else {
            //Create a tr tag var $tr = $("<tr></tr>");
            //Create 3 td tags var $td1 = $("<td>" + username + "</td>");
            var $td2 = $("<td>" + password + "</td>");
            var $td3 = $("<td></td>");
            //Create an input tag and set it as a delete button var $del = $("<input type='button' value='Delete'>");
            //Dynamically add a click event for the delete button $del.click(function() {
                //Delete all rows of the button, that is, $tr object $tr.remove();
            });
            //Add the delete button to the td3 tag $td3.append($del);
            //Add 3 td tags to the tr tag in sequence $tr.append($td1);
            $tr.append($td2);
            $tr.append($td3);
            //Add the tr tag to the tbody tag $("#tbodyID").append($tr);
            // Clear the contents of the username and password text boxes $("#usernameID").val("");
            $("#passwordID").val("");
        }
    });
</script>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Using jQuery to simulate the click event of the a tag cannot achieve the solution of jump
Summary of several ways to bind events to dynamically generated tags with jQuery
jQuery dynamically adds li tags and adds attributes and binds event methods
Detailed discussion of jQuery unbind to delete binding events/remove tags
jQuery binds click event to a tag example code
jQuery trigger forges the click event of the a tag to replace the window.open method
Use JS or jQuery to simulate mouse click a tag event code
jQuery triggers a tag jump event sample code
How to use Struts2's s:radio tag and add change event with jQuery
JQuery binds the onchange event of the select tag, pops up the selected value, and implements jump and parameter transfer

<<: MySQL uses custom functions to recursively query parent ID or child ID

>>: Solve the problem that the docker container cannot ping the external network