實例詳解jQuery實作使用者資訊表格的新增與刪除功能
本文主要介紹了jQuery實現用戶資訊表格的添加和刪除功能,程式碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下，希望能幫助到大家。
1、瀏覽器介面
#一個簡單的使用者資訊操作
#2、html代碼
<body>
<form name="userForm">
<center>
用户录入
<br />
用户名:
<input id="username" name="username" type="text" size=15 />
E-mail:
<input id="email" name="email" type="text" size=15 />
电话:
<input id="tel" name="tel" type="text" size=15 />
<input type="button" value="添加" id="btn_submit" />
<input type="button" value="删除所有" id="btn_removeAll" />
</center>
</form>
----------------------------
<hr />
<table border="1" align="center" cellpadding=0 cellspacing=0 width=400>
<thead>
<tr>
<th>用户名</th>
<th>E-mail</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
----------------------------
<tbody id="userTbody">
<tr>
<td>乔峰</td>
<td>qiao@163.com</td>
<td>18212345678</td>
<td>
<a href='#' class='myClz'>删除</a>
</td>
</tr>
</tbody>
----------------------------
</table>
</body>3、jQuery實作
##
$(function () {
$("#btn_submit").click(function () {
// 获取用户输入的值
var usernameVal = $("#username").val();
var emailVal = $("#email").val();
var telVal = $("#tel").val();
var tr = "<tr><td>" + usernameVal + "</td><td>" + emailVal
+ "</td><td>" + telVal
+ "</td><td><a href='#' class='myClz'>删除</a></td></tr>";
$("#userTbody").append(tr);
});
// 全部删除
$("#btn_removeAll").click(function () {
$("#userTbody").empty();
});
//删除一行数据
/*click只对本身页面有的元素有作用，对于后面新加的元素，不起作用
$(".myClz").click(function() {
console.log(123);
});
*/
/*选择id=userTbody元素下所有样式名含有myClz的标签,并添加click事件
*当点击后,向上一级找到tr元素，然后删除
*/
$('#userTbody').on('click', ".myClz", function () {
$(this).closest('tr').remove();
});
});以上是實例詳解jQuery實作使用者資訊表格的新增與刪除功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
如何用小紅書號找出用戶？能查到手機號碼嗎？
Mar 22, 2024 am 08:40 AM
隨著社群媒體的迅速發展，小紅書已經成為了備受青睞的社群平台之一。用戶可以透過建立小紅書號來展示個人身份，並與其他用戶交流互動。如果你需要找某個用戶的小紅書號碼，可以按照以下簡單步驟來操作。一、如何用小紅書號找出用戶？ 1.開啟小紅書APP，點選右下角的「發現」按鈕，然後選擇「筆記」選項。 2.在筆記清單中，找到你想找的用戶發布的筆記。點擊進入筆記詳情頁。 3.在筆記詳情頁中，點選使用者頭像下方的「追蹤」按鈕，即可進入該使用者的個人首頁。 4.在使用者個人主頁右上角，點選三個點按鈕，然後選擇「個人資訊
以超級使用者登入Ubuntu
Mar 20, 2024 am 10:55 AM
在Ubuntu系統中，root使用者通常是停用狀態的。要啟動root用戶，可以使用passwd指令設定密碼，然後使用su-指令以root身分登入。根用戶是具有系統管理權限且不受限制的使用者。他擁有存取和修改檔案、使用者管理、軟體安裝和刪除，以及系統配置變更等權限。根用戶與一般用戶有著明顯的區別，根用戶擁有系統中最高的權限和更廣泛的控制權。根用戶可以執行重要的系統命令和編輯系統文件，而普通用戶則無法做到這一點。在本指南中，我將探討Ubuntu根用戶，如何以根用戶身份登錄，以及它與一般用戶的不同之處。注意
華為手機如何實現雙微信登入？
Mar 24, 2024 am 11:27 AM
華為手機如何實現雙微信登入？隨著社群媒體的興起，微信已成為人們日常生活中不可或缺的溝通工具之一。然而，許多人可能會遇到一個問題：在同一部手機上同時登入多個微信帳號。對於華為手機用戶來說，實現雙微信登入並不困難，本文將介紹華為手機如何實現雙微信登入的方法。首先，華為手機自帶的EMUI系統提供了一個很方便的功能－應用程式雙開。透過應用程式雙開功能，用戶可以在手機上同
PHP程式設計指南：實作斐波那契數列的方法
Mar 20, 2024 pm 04:54 PM
程式語言PHP是一種用於Web開發的強大工具，能夠支援多種不同的程式設計邏輯和演算法。其中，實作斐波那契數列是一個常見且經典的程式設計問題。在這篇文章中，將介紹如何使用PHP程式語言來實作斐波那契數列的方法，並附上具體的程式碼範例。斐波那契數列是一個數學上的序列，其定義如下：數列的第一個和第二個元素為1，從第三個元素開始，每個元素的值等於前兩個元素的和。數列的前幾元
如何在華為手機上實現微信分身功能
Mar 24, 2024 pm 06:03 PM
如何在華為手機上實現微信分身功能隨著社群軟體的普及和人們對隱私安全的日益重視，微信分身功能逐漸成為人們關注的焦點。微信分身功能可以幫助使用者在同一台手機上同時登入多個微信帳號，方便管理和使用。在華為手機上實現微信分身功能並不困難，只需要按照以下步驟操作即可。第一步：確保手機系統版本和微信版本符合要求首先，確保你的華為手機系統版本已更新至最新版本，以及微信App
Linux系統中的使用者密碼儲存機制解析
Mar 20, 2024 pm 04:27 PM
Linux系統中的使用者密碼儲存機制解析在Linux系統中，使用者密碼的儲存是非常重要的安全機制之一。本文將解析Linux系統中使用者密碼的儲存機制，包括密碼的加密儲存、密碼的驗證過程以及如何安全地管理使用者密碼。同時，將透過具體的程式碼範例展示密碼儲存的實際操作流程。一、密碼的加密儲存在Linux系統中，使用者密碼並不是以明文的形式儲存在系統中，而是經過加密後儲存。 L
Oracle資料庫：一個使用者是否可以擁有多個表空間？
Mar 03, 2024 am 09:24 AM
Oracle資料庫是一種常用的關聯式資料庫管理系統，許多使用者都會遇到關於表空間的使用問題。在Oracle資料庫中，一個使用者可以擁有多個表空間，這樣可以更好地管理資料儲存和組織。本文將探討一個使用者如何在Oracle資料庫中擁有多個表空間，並提供具體的程式碼範例。在Oracle資料庫中，表空間是用來儲存表格、索引、視圖等物件的邏輯結構。每個資料庫至少有一個表空間，
PHP遊戲需求實作指南
Mar 11, 2024 am 08:45 AM
PHP遊戲需求實現指南隨著網路的普及和發展，網頁遊戲的市場也越來越火爆。許多開發者希望利用PHP語言來開發自己的網頁遊戲，而實現遊戲需求是其中一個關鍵步驟。本文將介紹如何利用PHP語言來實現常見的遊戲需求，並提供具體的程式碼範例。 1.創造遊戲角色在網頁遊戲中，遊戲角色是非常重要的元素。我們需要定義遊戲角色的屬性，例如姓名、等級、經驗值等，並提供方法來操作這些
