php 表格带删除按钮,jQuery实现的简单动态添加、删除表格功能示例

本文实例讲述了jQuery实现的简单动态添加、删除表格功能。分享给大家供大家参考，具体如下：

先来看看运行效果：

具体代码如下：

www.jb51.net 脚本之家

* {

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;

}

课程名称所属学院已学会

JavaScript前端与移动开发学院 GETcss前端与移动开发学院 GEThtml前端与移动开发学院 GETjQuery前端与移动开发学院 GET

添加数据

x

课程名称：

所属学院：

$(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 = '

'

+ '

' + txtLesson + ''

+ '

' + txtBelSch + ''

+ '

GET'

+ '

';

$("#j_tb").append(str);

$("#j_mask").hide();

$("#j_formAdd").hide();

});

$("#j_tb").on("click",".get",function(){

$(this).parent().parent().remove();

});

});

希望本文所述对大家jQuery程序设计有所帮助。