您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)jQuery如何實(shí)現(xiàn)的簡單動(dòng)態(tài)添加、刪除表格功能,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
先來看看運(yùn)行效果:
具體代碼如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net 億速云</title> <style> * { padding: 0; margin: 0; } .wrap { width: 410px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微軟雅黑"; color: #fff; } td { font: 14px "微軟雅黑"; } td a.get { text-decoration: none; } a.del:hover { text-decoration: underline; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } .btnAdd { width: 110px; height: 30px; font-size: 20px; font-weight: bold; } .form-item { height: 100%; position: relative; padding-left: 100px; padding-right: 20px; margin-bottom: 34px; line-height: 36px; } .form-item > .lb { position: absolute; left: 0; top: 0; display: block; width: 100px; text-align: right; } .form-item > .txt { width: 300px; height: 32px; } .mask { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #000; opacity: 0.15; display: none; } .form-add { position: fixed; top: 30%; left: 50%; margin-left: -197px; padding-bottom: 20px; background: #fff; display: none; } .form-add-title { background-color: #f7f7f7; border-width: 1px 1px 0 1px; border-bottom: 0; margin-bottom: 15px; position: relative; } .form-add-title span { width: auto; height: 18px; font-size: 16px; font-family: 宋體; font-weight: bold; color: rgb(102, 102, 102); text-indent: 12px; padding: 8px 0px 10px; margin-right: 10px; display: block; overflow: hidden; text-align: left; } .form-add-title div { width: 16px; height: 20px; position: absolute; right: 10px; top: 6px; font-size: 30px; line-height: 16px; cursor: pointer; } .form-submit { text-align: center; } .form-submit input { width: 170px; height: 32px; } </style> </head> <body> <div class="wrap"> <div> <input type="button" value="添加數(shù)據(jù)" id="j_btnAddData" class="btnAdd"/> </div> <table> <thead> <tr> <!-- <th><input type="checkbox" id="j_cbAll" /></th> --> <th>課程名稱</th> <th>所屬學(xué)院</th> <th>已學(xué)會(huì)</th> </tr> </thead> <tbody id="j_tb"> <tr> <!-- <td><input type="checkbox"/></td> --> <td>JavaScript</td> <td>前端與移動(dòng)開發(fā)學(xué)院</td> <td><a href="javascrip:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="get">GET</a></td> </tr> <tr> <!-- <td><input type="checkbox"/></td> --> <td>css</td> <td>前端與移動(dòng)開發(fā)學(xué)院</td> <td><a href="javascrip:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="get">GET</a></td> </tr> <tr> <!-- <td><input type="checkbox"/></td> --> <td>html</td> <td>前端與移動(dòng)開發(fā)學(xué)院</td> <td><a href="javascrip:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="get">GET</a></td> </tr> <tr> <!-- <td><input type="checkbox"/></td> --> <td>jQuery</td> <td>前端與移動(dòng)開發(fā)學(xué)院</td> <td><a href="javascrip:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="get">GET</a></td> </tr> </tbody> </table> </div> <div id="j_mask" class="mask"></div> <div id="j_formAdd" class="form-add"> <div class="form-add-title"> <span>添加數(shù)據(jù)</span> <div id="j_hideFormAdd">x</div> </div> <div class="form-item"> <label class="lb" for="j_txtLesson">課程名稱:</label> <input class="txt" type="text" id="j_txtLesson" placeholder="請輸入課程名稱"> </div> <div class="form-item"> <label class="lb" for="j_txtBelSch">所屬學(xué)院:</label> <input class="txt" type="text" id="j_txtBelSch" value="前端與移動(dòng)開發(fā)學(xué)院"> </div> <div class="form-submit"> <input type="button" value="添加" id="j_btnAdd"> </div> </div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(document).ready(function () { $("#j_btnAddData").click(function () { $("#j_mask").show(); $("#j_formAdd").show(); $("#j_txtLesson").val(""); $("#j_txtBelSch").val("前端開發(fā)學(xué)院"); }); $("#j_hideFormAdd").click(function () { $("#j_mask").hide(); $("#j_formAdd").hide(); }); $("#j_btnAdd").click(function () { var txtLesson = $("#j_txtLesson").val(); var txtBelSch = $("#j_txtBelSch").val(); if (txtLesson == "" || txtBelSch == "") { alert("課程名或者所屬學(xué)院不能為空"); return; } var str = '<tr>' + '<td>' + txtLesson + '</td>' + '<td>' + txtBelSch + '</td>' + '<td><a href="javascrip:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="get">GET</a></td>' + '</tr>'; $("#j_tb").append(str); $("#j_mask").hide(); $("#j_formAdd").hide(); }); $("#j_tb").on("click",".get",function(){ $(this).parent().parent().remove(); }); }); </script> </body> </html>
關(guān)于“jQuery如何實(shí)現(xiàn)的簡單動(dòng)態(tài)添加、刪除表格功能”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯(cuò),請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。