jQuery實現(xiàn)表格元素動態(tài)創(chuàng)建功能
更新時間:2017年01月09日 11:55:58 作者:Zerone1993
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)表格元素動態(tài)創(chuàng)建功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
Jquery實現(xiàn)表格元素的動態(tài)創(chuàng)建,本質(zhì)是通過構(gòu)造一個Dom Node節(jié)點,并且拼接到表格的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í)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- javascript實現(xiàn)對表格元素進(jìn)行排序操作
- js操作table元素實現(xiàn)表格行列新增、刪除技巧總結(jié)
- JavaScript對表格或元素按文本,數(shù)字或日期排序的方法
- 原生JS操作網(wǎng)頁給p元素添加onclick事件及表格隔行變色
- 使用JS操作頁面表格,元素的一些技巧
- jQuery EasyUI API 中文文檔 - DataGrid數(shù)據(jù)表格
- jQuery EasyUI API 中文文檔 - TreeGrid 樹表格使用介紹
- jQuery EasyUI中對表格進(jìn)行編輯的實現(xiàn)代碼
- jQuery EasyUI API 中文文檔 - ComboGrid 組合表格
- jQuery LigerUI 使用教程表格篇(1)
相關(guān)文章
jquery實現(xiàn)側(cè)邊彈出的垂直導(dǎo)航
這篇文章主要介紹了jquery動畫特效結(jié)合css實現(xiàn)側(cè)邊彈出的垂直導(dǎo)航的方法及代碼分享,需要的朋友可以參考下2014-12-12jQuery實現(xiàn)跟隨鼠標(biāo)運動圖層效果的方法
這篇文章主要介紹了jQuery實現(xiàn)跟隨鼠標(biāo)運動圖層效果的方法,可實現(xiàn)實時顯示鼠標(biāo)坐標(biāo)的圖層跟隨鼠標(biāo)運動的效果,非常具有實用價值,需要的朋友可以參考下2015-02-02jQuery中bind,live,delegate與one方法的用法及區(qū)別解析
本篇文章主要是對jQuery中bind,live,delegate與one方法的用法及區(qū)別進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12jQuery時間插件jquery.clock.js用法實例(5個示例)
這篇文章主要介紹了jQuery時間插件jquery.clock.js用法,結(jié)合5個實例簡單分析了jQuery時間插件jquery.clock.js的具體使用技巧,需要的朋友可以參考下2016-01-01