快捷導(dǎo)航

jQuery實(shí)現(xiàn)表格元素動態(tài)創(chuàng)建功能

更新時間：2017年01月09日 11:55:58 作者：Zerone1993

這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)表格元素動態(tài)創(chuàng)建功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

Jquery實(shí)現(xiàn)表格元素的動態(tài)創(chuàng)建，本質(zhì)是通過構(gòu)造一個Dom Node節(jié)點(diǎn)，并且拼接到表格的Dom樹上的子葉位置。

HTML正文：

用戶：<input type="text" id="user"/>
郵箱：<input type="text" id="mail"/>
手機(jī)：<input type="text" id="phone"/>
<br>
<button id="b1">添加</button><br>
<table border=1 id="table">
<tr><td>user</td><td>mail</td><td>phone</td><td>operation</td></tr>
<tr><td>zhangsan</td><td>aaa@qq.com</td><td>25652463</td><td><a href="##">delete</a></td></tr>
</table>

Javascript處理代碼：

$("#b1").click(function(){
var $user=$("#user");
var $mail=$("#mail");
var $phone=$("#phone");

//組裝對象
$tr=$("<tr></tr>");
$td1=$("<td></td>");
$td1.text($user.val());

$td2=$("<td></td>");
$td2.text($mail.val());

$td3=$("<td></td>");
$td3.text($phone.val());

$td4=$("<td></td>");

$href=$("<a></a>");
$href.attr("href","##");
$href.text("delete");
$td4.append($href);

$href.click(function(){
if(window.confirm("確定刪除？")){
 //這里使用this表示當(dāng)前事件綁定對象---？ $(this)不能用$(href)代替，否則會認(rèn)為每次都是最新對象，原有對象的行為不能保存
 $(this).parent().parent().remove(); 
}else{
 return;
}
});

$("#table").append($tr);
 $tr.append($td1);
 $tr.append($td2);
 $tr.append($td3);
 $tr.append($td4);
});

效果圖：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jquery實(shí)現(xiàn)側(cè)邊彈出的垂直導(dǎo)航
這篇文章主要介紹了jquery動畫特效結(jié)合css實(shí)現(xiàn)側(cè)邊彈出的垂直導(dǎo)航的方法及代碼分享,需要的朋友可以參考下
2014-12-12
jQuery的Read()方法代替原生JS詳解
眾所周知在jQuery中ready方法在DOM完全下載后立即執(zhí)行其中的代碼。因?yàn)樗堑人械腄OM元素都加載完畢，才執(zhí)行給定的函數(shù)，所以你能確定那些試圖操作和訪問元素節(jié)點(diǎn)的方法都能被執(zhí)行。而這篇文章給大家介紹的是如何用jQuery的Read()方法代替原生JS，下面來一起看看。
2016-11-11
jQuery實(shí)現(xiàn)跟隨鼠標(biāo)運(yùn)動圖層效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)跟隨鼠標(biāo)運(yùn)動圖層效果的方法,可實(shí)現(xiàn)實(shí)時顯示鼠標(biāo)坐標(biāo)的圖層跟隨鼠標(biāo)運(yùn)動的效果,非常具有實(shí)用價值,需要的朋友可以參考下
2015-02-02
jQuery中bind,live,delegate與one方法的用法及區(qū)別解析
本篇文章主要是對jQuery中bind,live,delegate與one方法的用法及區(qū)別進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
jQuery簡單幾行代碼實(shí)現(xiàn)tab切換
本文給大家介紹的是一款使用jQuery實(shí)現(xiàn)的簡易選項(xiàng)卡的代碼，通過控制css熟悉來實(shí)現(xiàn)tab切換，思路清晰，這里推薦給大家。
2015-03-03
jQuery時間插件jquery.clock.js用法實(shí)例(5個示例)
這篇文章主要介紹了jQuery時間插件jquery.clock.js用法,結(jié)合5個實(shí)例簡單分析了jQuery時間插件jquery.clock.js的具體使用技巧,需要的朋友可以參考下
2016-01-01
jQuery如何設(shè)置背景顏色
這篇文章主要介紹了jQuery如何設(shè)置背景顏色，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
EasyUI折疊表格層次顯示detailview詳解及實(shí)例
這篇文章主要介紹了EasyUI折疊表格層次顯示detailview詳解及實(shí)例,非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2016-12-12
基于jQuery實(shí)現(xiàn)的單行公告活動輪播效果
本文通過實(shí)例代碼給大家介紹了基于jQuery實(shí)現(xiàn)的單行公告活動輪播效果，非常不錯，代碼簡單易懂，具有參考借鑒價值，需要的的朋友參考下吧
2017-08-08
常用jQuery代碼分享
本文給大家分享了幾個常用的jQuery代碼，十分的簡單實(shí)用，有需要的小伙伴可以參考下。
2015-07-07