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.dhdzp.com 腳本之家</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="請(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)開發(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相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見經(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)文章
有的時(shí)候我們希望保留右上的X，同時(shí)使用fancybox 的modal模式，怎么辦呢2012-10-10
基于JQuery的數(shù)字改變的動(dòng)畫效果--可用來(lái)做計(jì)數(shù)器
之前用javascript做個(gè)計(jì)數(shù)器，從網(wǎng)上搜了搜，找不到合適的，就想著用jquery自己做一個(gè)2010-08-08
輕松實(shí)現(xiàn)jQuery添加刪除按鈕Click事件
這篇文章主要為大家詳細(xì)介紹了如何輕松實(shí)現(xiàn)jQuery添加刪除按鈕Click事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
父級(jí)以及同級(jí)元素的查找在使用過(guò)程中還是蠻頻繁的，下面為大家介紹下jQuery是如何實(shí)現(xiàn)的，感興趣的朋友可以參考下2013-09-09
jQuery對(duì)象和Javascript對(duì)象之間轉(zhuǎn)換的實(shí)例代碼
jQuery對(duì)象和Javascript對(duì)象之間轉(zhuǎn)換的實(shí)例代碼，需要的朋友可以參考一下2013-03-03
jQuery+CSS3實(shí)現(xiàn)樹葉飄落特效
本文給大家分享的是一段使用jQuery+CSS3實(shí)現(xiàn)樹葉飄落特效的代碼，效果非常不錯(cuò)，分享給大家，希望大家能夠喜歡2015-02-02
IE下使用jQuery重置iframe地址時(shí)內(nèi)存泄露問(wèn)題解決辦法
這篇文章主要介紹了IE下使用jQuery重置iframe地址時(shí)內(nèi)存泄露問(wèn)題解決辦法,需要的朋友可以參考下2015-02-02
本篇文章主要介紹了jQuery輸入框密碼顯示隱藏代碼的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
這篇文章主要介紹了jQuery選擇器基礎(chǔ)知識(shí),結(jié)合實(shí)例分析了jQuery選擇器的功能、使用方法與相關(guān)操作技巧,需要的朋友可以參考下2016-05-05
本文目的：為了了解stop()的用法，舉個(gè)例子，直觀的方式看看。非常的簡(jiǎn)單實(shí)用，有需要的小伙伴參考下2014-11-11