jQuery實(shí)現(xiàn)的簡(jiǎn)單動(dòng)態(tài)添加、刪除表格功能示例
更新時(shí)間：2017年09月21日 09:46:57 作者：ITzhongzi
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單動(dòng)態(tài)添加、刪除表格功能,涉及jQuery事件響應(yīng)及表格元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)的簡(jiǎn)單動(dòng)態(tài)添加、刪除表格功能。分享給大家供大家參考，具體如下：
先來(lái)看看運(yùn)行效果：
具體代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>www.dbjr.com.cn 腳本之家</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)開(kāi)發(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)開(kāi)發(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)開(kāi)發(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)開(kāi)發(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="請(qǐng)輸入課程名稱">
</div>
<div class="form-item">
<label class="lb" for="j_txtBelSch">所屬學(xué)院：</label>
<input class="txt" type="text" id="j_txtBelSch" value="前端與移動(dòng)開(kāi)發(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("前端開(kāi)發(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相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)用戶信息表格的添加和刪除功能
- jQuery實(shí)現(xiàn)動(dòng)態(tài)添加、刪除按鈕及input輸入框的方法
- jquery Easyui Datagrid實(shí)現(xiàn)批量操作（編輯，刪除，添加）
- jquery 刪除節(jié)點(diǎn) 添加節(jié)點(diǎn) 找兄弟節(jié)點(diǎn)的簡(jiǎn)單實(shí)現(xiàn)
- jQuery動(dòng)態(tài)添加與刪除tr行實(shí)例代碼
- 使用jquery給指定的table動(dòng)態(tài)添加一行、刪除一行
- jQuery實(shí)現(xiàn)表格行和列的動(dòng)態(tài)添加與刪除方法【測(cè)試可用】
- JQuery EasyUI學(xué)習(xí)教程之datagrid 添加、修改、刪除操作
- jQuery Tags Input Plugin（添加/刪除標(biāo)簽插件）詳解
- jQuery實(shí)現(xiàn)動(dòng)態(tài)添加和刪除input框?qū)嵗a
相關(guān)文章
jquery對(duì)表單的基本操作，里面對(duì)于checkbox等表單的獲取，都有很詳細(xì)的說(shuō)明。2010-07-07
jquery.simple.tree插件 更簡(jiǎn)單，兼容性更好的無(wú)限樹(shù)插件
在這里介紹一款小巧，功能強(qiáng)大，能拖拽，支持異步，且兼容性更高的jquery Tree插件2010-09-09
基于zepto的移動(dòng)端輕量級(jí)日期插件--date_picker
這篇文章主要介紹了基于zepto的移動(dòng)端輕量級(jí)日期插件--date_picker,需要的朋友可以參考下2016-03-03
jquery1.4在ajax方法上進(jìn)一步的進(jìn)行優(yōu)化和調(diào)整，主要是做了如下的改進(jìn)。2010-02-02
jQuery使用empty()方法刪除元素及其所有子元素的方法
這篇文章主要介紹了jQuery使用empty()方法刪除元素及其所有子元素的方法,涉及jQuery操作元素的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jquery $("#variable") 循環(huán)改變variable的值示例
這篇文章主要介紹了jquery $("#variable")如何循環(huán)改變variable的值,需要的朋友可以參考下2014-02-02
jQuery+canvas實(shí)現(xiàn)簡(jiǎn)單的球體斜拋及顏色動(dòng)態(tài)變換效果
這篇文章主要介紹了jQuery+canvas實(shí)現(xiàn)簡(jiǎn)單的球體斜拋及顏色動(dòng)態(tài)變換效果,通過(guò)jQuery+html5的canvas利用時(shí)間函數(shù)進(jìn)行實(shí)時(shí)數(shù)學(xué)運(yùn)算動(dòng)態(tài)繪制拋物線圖形的技巧,需要的朋友可以參考下2016-01-01
SuperSlide標(biāo)簽切換、焦點(diǎn)圖多種組合插件
SuperSlide 是致力于實(shí)現(xiàn)網(wǎng)站統(tǒng)一特效調(diào)用的函數(shù)，能解決大部分標(biāo)簽切換、焦點(diǎn)圖切換等效果，還能多個(gè)slide組合創(chuàng)造更多的效果。（兼容ie內(nèi)核(包括無(wú)敵的 ie6)、webkit內(nèi)核、ff、opera等主流瀏覽器）。2015-03-03
利用imgareaselect輔助后臺(tái)實(shí)現(xiàn)圖片上傳裁剪
這篇文章主要為大家詳細(xì)介紹了利用imgareaselect輔助后臺(tái)實(shí)現(xiàn)圖片裁剪的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
AJAX 全稱 Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。它并非一種新的技術(shù)，而是以下幾種原有技術(shù)的結(jié)合體。接下來(lái)通過(guò)本文給大家介紹jQuery Ajax 異步加載顯示等待效果，需要的朋友一起學(xué)習(xí)吧2016-08-08