jQuery實(shí)現(xiàn)用戶信息表格的添加和刪除功能
1、瀏覽器界面
“專業(yè)、務(wù)實(shí)、高效、創(chuàng)新、把客戶的事當(dāng)成自己的事”是我們每一個人一直以來堅(jiān)持追求的企業(yè)文化。 成都創(chuàng)新互聯(lián)是您可以信賴的網(wǎng)站建設(shè)服務(wù)商、專業(yè)的互聯(lián)網(wǎng)服務(wù)提供商! 專注于成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、軟件開發(fā)、設(shè)計(jì)服務(wù)業(yè)務(wù)。我們始終堅(jiān)持以客戶需求為導(dǎo)向，結(jié)合用戶體驗(yàn)與視覺傳達(dá)，提供有針對性的項(xiàng)目解決方案，提供專業(yè)性的建議，創(chuàng)新互聯(lián)建站將不斷地超越自我，追逐市場，引領(lǐng)市場！
一個簡單的用戶信息操作
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實(shí)現(xiàn)
$(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();
});
//刪除一行數(shù)據(jù)
/*click只對本身頁面有的元素有作用，對于后面新加的元素，不起作用
$(".myClz").click(function() {
console.log(123);
});
*/
/*選擇id=userTbody元素下所有樣式名含有myClz的標(biāo)簽,并添加click事件
*當(dāng)點(diǎn)擊后,向上一級找到tr元素，然后刪除
*/
$('#userTbody').on('click', ".myClz", function () {
$(this).closest('tr').remove();
});
});總結(jié)
以上所述是小編給大家介紹的jQuery實(shí)現(xiàn)用戶信息表格的添加和刪除功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
文章題目：jQuery實(shí)現(xiàn)用戶信息表格的添加和刪除功能
路徑分享：http://www.chinadenli.net/article12/iiijgc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站改版、App開發(fā)、定制網(wǎng)站、小程序開發(fā)、動態(tài)網(wǎng)站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
