jQuery如何實現(xiàn)的簡單動態(tài)添加、刪除表格功能
這篇文章將為大家詳細講解有關jQuery如何實現(xiàn)的簡單動態(tài)添加、刪除表格功能，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
成都創(chuàng)新互聯(lián)主營椒江網站建設的網絡公司,主營網站建設方案,成都APP應用開發(fā),椒江h(huán)5成都微信小程序搭建,椒江網站營銷推廣歡迎椒江等地區(qū)企業(yè)咨詢
先來看看運行效果：
具體代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>www.jb51.net 創(chuàng)新互聯(lián)</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>所屬學院</th>
<th>已學會</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<!-- <td><input type="checkbox"/></td> -->
<td>JavaScript</td>
<td>前端與移動開發(fā)學院</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>前端與移動開發(fā)學院</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>前端與移動開發(fā)學院</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>前端與移動開發(fā)學院</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">所屬學院：</label>
<input class="txt" type="text" id="j_txtBelSch" value="前端與移動開發(fā)學院">
</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ā)學院");
});
$("#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("課程名或者所屬學院不能為空");
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>關于“jQuery如何實現(xiàn)的簡單動態(tài)添加、刪除表格功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
新聞名稱：jQuery如何實現(xiàn)的簡單動態(tài)添加、刪除表格功能
文章路徑：http://jinyejixie.com/article26/jjhdjg.html
成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站維護、微信小程序、網站導航、網站排名、自適應網站、全網營銷推廣
聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)
- 微信小程序商城功能大全及用戶量裂變方法！！ 2017-04-16
- 小程序開發(fā)制作的好處有哪些？ 2022-05-14
- 分析企業(yè)在小程序開發(fā)當中需注意的四個錯誤 2016-10-09
- 佛山微信小程序開發(fā)適合中小企業(yè)嗎 2022-12-02
- 廣州微信小程序開發(fā)、運營15條注意事項 2022-05-22
- 微信小程序是怎樣顛覆傳統(tǒng)電商的？ 2014-06-05
- 制定小程序開發(fā)報價單的依據(jù)有哪些？ 2022-11-11
- 為什么說微信小程序開發(fā)者需要格外用心 2022-11-12
- 足療門店小程序開發(fā)可幫助解決哪些問題？ 2021-01-02
- 成都小程序開發(fā)，能給品牌帶來什么優(yōu)勢？ 2022-07-20
- 微信小程序開發(fā)真的是未來發(fā)展趨勢和優(yōu)勢嗎？ 2018-01-03
- 小程序套路太多？用這幾招絕對靠譜！ 2016-09-21