jQuery實(shí)現(xiàn)表格元素動(dòng)態(tài)創(chuàng)建功能
更新時(shí)間：2017年01月09日 11:55:58 作者：Zerone1993
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)表格元素動(dòng)態(tài)創(chuàng)建功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
Jquery實(shí)現(xiàn)表格元素的動(dòng)態(tài)創(chuàng)建，本質(zhì)是通過(guò)構(gòu)造一個(gè)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");
//組裝對(duì)象
$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)前事件綁定對(duì)象---？ $(this)不能用$(href)代替，否則會(huì)認(rèn)為每次都是最新對(duì)象，原有對(duì)象的行為不能保存
$(this).parent().parent().remove();
}else{
return;
}
});
$("#table").append($tr);
$tr.append($td1);
$tr.append($td2);
$tr.append($td3);
$tr.append($td4);
});
效果圖：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- javascript實(shí)現(xiàn)對(duì)表格元素進(jìn)行排序操作
- js操作table元素實(shí)現(xiàn)表格行列新增、刪除技巧總結(jié)
- JavaScript對(duì)表格或元素按文本，數(shù)字或日期排序的方法
- 原生JS操作網(wǎng)頁(yè)給p元素添加onclick事件及表格隔行變色
- 使用JS操作頁(yè)面表格，元素的一些技巧
- jQuery EasyUI API 中文文檔 - DataGrid數(shù)據(jù)表格
- jQuery EasyUI API 中文文檔 - TreeGrid 樹表格使用介紹
- jQuery EasyUI中對(duì)表格進(jìn)行編輯的實(shí)現(xiàn)代碼
- jQuery EasyUI API 中文文檔 - ComboGrid 組合表格
- jQuery LigerUI 使用教程表格篇(1)
相關(guān)文章
jQuery easyui刷新當(dāng)前tabs的方法
這篇文章給大家介紹了jquery easyui刷新當(dāng)前tabs的方法，本文涉及到param參數(shù)的屬性知識(shí)點(diǎn)，本文通過(guò)實(shí)例給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-09-09
jquery中關(guān)于bind()方法的使用技巧分享
這篇文章主要給大家分享了jquery中關(guān)于bind()方法的使用技巧，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-03-03
在jquery中經(jīng)常需要獲取form表單的一些值，下面是常用的代碼，需要的朋友可以參考下。2009-12-12
基于jquery插件實(shí)現(xiàn)拖拽刪除圖片功能
這篇文章主要介紹了基于jquery插件實(shí)現(xiàn)拖拽刪除圖片功能的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
今天小編就為大家分享一篇jquery判斷滾動(dòng)條距離頂部的距離方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
增強(qiáng)用戶體驗(yàn)友好性之jquery easyui window 窗口關(guān)閉時(shí)的提示
在項(xiàng)目中，客戶提出這么個(gè)要求，就是在關(guān)閉彈出的窗口的時(shí)候，如果點(diǎn)擊 紅X 或 取消按鈕 則提示 ”確認(rèn)保存了當(dāng)前的操作“ 這么個(gè)信息，否則就不提示啦2012-06-06
JQuery事件e參數(shù)的方法preventDefault()取消默認(rèn)行為
JQuery事件的e參數(shù)的方法preventDefault()可以取消對(duì)象的默認(rèn)行為，下有個(gè)不錯(cuò)的示例，大家可以參考下，希望對(duì)大家有所幫助2013-09-09
使用jquery實(shí)現(xiàn)圖文切換效果另加特效
白天活干完，弄個(gè)jquery仿凡客誠(chéng)品圖片切換的效果;以前寫的不是很好，今天重新做個(gè)jquery特效，其實(shí)很簡(jiǎn)單,感興趣的朋友可以了解下哦，希望本文對(duì)你有幫助2013-01-01
jQuery Easyui 驗(yàn)證兩次密碼輸入是否相等
easyui是一種基于jQuery的用戶界面插件集合。接下來(lái)通過(guò)本文給大家介紹jQuery Easyui 驗(yàn)證兩次密碼輸入是否相等的相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
jQuery的中 is('':visible'') 解析及用法(必看)
下面小編就為大家?guī)?lái)一篇jQuery的中 is(':visible') 解析及用法(必看)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02