Home > Article > Web Front-end > Example of simple dynamic addition and deletion of tables implemented by jQuery
This article mainly introduces the simple dynamic addition and deletion of tables functions implemented by jQuery, involving implementation techniques related to jQuery event response and dynamic operation of table elements. Friends who are interested in jquery can refer to the examples of this article
Describes the simple dynamic addition and deletion of tables functions implemented by jQuery. Share it with everyone for your reference, the details are as follows:
The specific code is as follows:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>m.sbmmt.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 p {
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>
<p class="wrap">
<p>
<input type="button" value="添加数据" id="j_btnAddData" class="btnAdd"/>
</p>
<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>前端与移动开发学院</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>前端与移动开发学院</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>前端与移动开发学院</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>前端与移动开发学院</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>
</p>
<p id="j_mask" class="mask"></p>
<p id="j_formAdd" class="form-add">
<p class="form-add-title">
<span>添加数据</span>
<p id="j_hideFormAdd">x</p>
</p>
<p class="form-item">
<label class="lb" for="j_txtLesson">课程名称：</label>
<input class="txt" type="text" id="j_txtLesson" placeholder="请输入课程名称">
</p>
<p class="form-item">
<label class="lb" for="j_txtBelSch">所属学院：</label>
<input class="txt" type="text" id="j_txtBelSch" value="前端与移动开发学院">
</p>
<p class="form-submit">
<input type="button" value="添加" id="j_btnAdd">
</p>
</p>
<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("前端开发学院");
});
$("#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>The above is all the content of this article, I hope you can help everyone learn! !
Related recommendations:
JQuery uses $.ajax or $.getJSON to obtain JSON data across domains.
jQuery implements table Example of how only one of the two column CheckBoxes can be selected
jQuery implements a scrolling listening function compatible with IE6
The above is the detailed content of Example of simple dynamic addition and deletion of tables implemented by jQuery. For more information, please follow other related articles on the PHP Chinese website!