Mark一段自己写的添加节点的代码
function reply2(){
$( "<div class=sec1-div5>"+"<div class='sec1-div5-img1'><img src='image/my.jpg' width='25px' height='25px'/></div>" +
"<div><p class='sec1-p'><span>我：</span>"+$("#comment").val()+"<br/><span class='sec1-span1'>"
+formatDate(new Date())+"</span></p></div></div>"
).appendTo("#sec1-div5");
}
在附上自己写的一段代码，包含向table中添加行：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>考勤管理系统</title>
<script src="date10/laydate/laydate.js"></script>
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="dist/css/bootstrap.css">
<link rel="stylesheet" href="date10/laydate/need/laydate.css"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body{
font-family: 微软雅黑;
background: #EFF0F4;
}
@font-face {
font-family: myfont;
src: url("font/iconfont.woff");
}
.myfont1{
font-family: "myfont";
font-size: 15px;
}
.title1{
background: #EFF0F4;
margin-top: 30px;
margin-left: 10px;
}
.subtitle{
background: none;
}
.title1 ul li a{
color:#999999;
}
.title1 ul li a:hover{
color: #4CC0C1;
text-decoration: none;
}
.sec1{
background: white;
98%;
border-radius: 4px;
margin-left: 15px;
margin-top: 20px;
height:auto;
}
.down-arrow,
.close1
{
display: inline-block;
/*border:1px solid red;*/
30px;
height:30px;
background:#E3E4E8 ;
border-radius: 3px;
line-height: 30px;
text-align: center;
margin-left: 6px;
-webkit-transition: all linear .3s;
}
.down-arrow:hover{
background: #4CC0C1;
color:white;
-webkit-transition: all linear .3s;
}
.sec1-head{
border-bottom: 1px dotted #999999;;
margin-top: 10px;
99%;
margin-left: 10px;
}
.sec1-search{
/*border:1px solid red;*/
display: inline-block;
}
.sec1-search>span{
font-size: 16px;
position: relative;
top:5px;
}
.sec1-input{
30%;
margin-left: 6px;
-webkit-transition: all linear .3s;
}
.sec1-input:focus{
34%;
-webkit-transition: all linear .3s;
outline: black;
}
.sec1-search-icon{
30px;
height:30px;
line-height: 30px;
text-align: center;
border-radius: 3px;
background:#E3E4E8 ;
margin-top: -3px;
margin-left: 5px;
-webkit-transition: all linear .3s;
}
.sec1-search-icon:hover{
color:white;
background: #4CC0C1;
-webkit-transition: all linear .3s;
}
.btn1{
color:white;
background:#4CC0C1;
border:none;
/*margin-left: 20px;*/
font-size: 16px;
-webkit-transition: all linear .3s;
}
.btn1 a{
color:white;
text-decoration: none;
}
.btn2{
color:white;
background:#4CC0C1;
border:none;
font-size: 13px;
-webkit-transition: all linear .3s;
}
.btn1:hover{
background:#42aeb2 ;
color: #fff;
-webkit-transition: all linear .3s;
}
.btn2:hover{
background:#42aeb2 ;
color: #fff;
-webkit-transition: all linear .3s;
}
.sec1-Sch{
margin-top: 40px;
margin-bottom: 30px;
}
.sec1-pageActive{
background:#4CC0C1!important;
color:#fff!important;
}
.sec1-page{
/*border:1px solid red;*/
margin-right: 2px;
}
.sec1-select{
/*border:1px solid red;*/
text-align: right;
margin-right: 15px;
margin-bottom: 10px;
}
/*----------------手工添加考勤弹窗-------------*/
.main1{
background: white;
/*height:auto;*/
height:600px;
margin-top: 60px;
border-radius: 4px;
}
.main1-subtitle{
background: none;
}
.main1-subtitle li a{
text-decoration: none;
color:#999999;
}
.main1-subtitle li a:hover{
color:#4CC0C1;
text-decoration: none;
}
.addinfo-title1{
border-bottom:1px dotted #999999;
}
.addinfo_content1{
margin-top:50px;
}
.student_info1{
border:1px solid #D9D9D9;
outline: none;
border-radius:3px;
height:30px;
450px;
}
.student_info1:focus{
border:1px solid #4CC0C1;
}
.input-group{
margin-top: 30px;
}
.addAttend_btn1{
color:white;
110px;
background:#4CC0C1;
border:none;
margin-left: 40px;
font-size: 14px;
margin-top: 30px;
}
.addAttend_btn1-1{
margin-left: 150px;
}
.addAttend_btn1:hover{
background:#42aeb2 ;
color: #fff;
}
/*----------学生请假信息录入----------------*/
.main2{
background: white;
/*height:auto;*/
height:610px;
margin-top: 60px;
border-radius: 4px;
}
.addinfo-title2{
border-bottom:1px dotted #999999;
}
.addinfo-content2{
margin-top:50px;
}
.student_info2{
border:1px solid #D9D9D9;
outline: none;
border-radius:3px;
height:30px;
450px;
}
.student_info2:focus{
border:1px solid #4CC0C1;
}
.input-group{
margin-top: 15px;
}
/*-----------弹窗设置------------*/
#main1{
border:1px solid #999999;
position: absolute;
z-index: 2;
margin-left: 7%;
margin-top: -45%;
display: none;
}
#main2{
border:1px solid #999999;
position: absolute;
z-index: 2;
margin-left: 7%;
margin-top: -84%;
display: none;
}
</style>
</head>
<body>
<header class="container-fluid "><!--页头--->
<div class="row title1">
<h3 class="col-lg-12 col-xs-12">考勤管理</h3>
<ul class="breadcrumb subtitle col-lg-12 col-xs-12">
<li><a href="#">首页</a></li>
<li><a href="#">考勤管理</a></li>
</ul>
</div>
</header>
<!---考勤信息表--->
<section class="sec1 container"><!--考勤信息表，表头--->
<div class="row container-fluid sec1-head">
<h4 class="col-lg-6 ">学生出勤明细表</h4>
<div class="col-lg-6">
<!--<div class="myfont1 close1 pull-right">�</div>-->
<div class="myfont1 down-arrow pull-right">�</div>
</div>
</div>
<div class="container sec1-Sch"><!--搜索框--->
<div class="row">
<div class="col-lg-4">
<div class="btn btn1" id="add-Attend"><a href="#">添加考勤信息+</a></div>
</div>
<div class=" sec1-search col-lg-8 ">
<span class="myfont1 sec1-search-icon pull-right">�</span>
<input type="text" placeholder="卡号..." class="form-control sec1-input pull-right"/>
<input type="text" placeholder="学生姓名..." class="form-control sec1-input pull-right"/>
<span class="pull-right">搜索：</span>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="table-responsive">
<table class="table table-striped table-bordered " id="attendence_table">
<tr id="table_head">
<th>日期</th>
<th>星期</th>
<th>卡号</th>
<th>姓名</th>
<th>性别</th>
<th>班级</th>
<th>入园刷卡时间</th>
<th>出园刷卡时间</th>
<th>选择</th>
</tr>
<tr>
<td>2016.12.12</td>
<td>星期一</td>
<td>20160101</td>
<td>李未央</td>
<td>女</td>
<td>小一班</td>
<td>09:11:12</td>
<td>17:30:00</td>
<td>
<input type="checkbox" class="sec1-checkBox"/>
</td>
</tr>
<tr>
<td>2016.12.12</td>
<td>星期一</td>
<td>20160102</td>
<td>拓跋余</td>
<td>男</td>
<td>小一班</td>
<td>08:20:40</td>
<td>18:00:00</td>
<td>
<input type="checkbox" class="sec1-checkBox"/>
</td>
</tr>
<tr>
<td>2016.12.12</td>
<td>星期一</td>
<td>20160103</td>
<td>拓跋浚</td>
<td>男</td>
<td>小一班</td>
<td>08:50:00</td>
<td>17:50:00</td>
<td>
<input type="checkbox" class="sec1-checkBox"/>
</td>
</tr>
<tr id="main1_tr">
<td>2016.12.12</td>
<td>星期一</td>
<td>20160108</td>
<td>拓跋迪</td>
<td>女</td>
<td>小二班</td>
<td>09:23:40</td>
<td>17:00:00</td>
<td>
<input type="checkbox" class="sec1-checkBox"/>
</td>
</tr>
</table>
</div>
<div class="row sec1-select">
<!--<a href="#" >全选</a><span> </span><a href="#" >反全选</a><span> </span><a href="#" id="Del">删除</a>-->
<div class="btn btn2" id="selectAll">全选</div>
<div class="btn btn2" id="Unselect">反全选</div>
<div class="btn btn2" id="sec1-Del">删除</div>
<div class="btn btn2">推送邮件</div>
<div class="btn btn2">导出</div>
</div>
<div class="row sec1-page">
<nav class="pull-right">
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#" class="sec1-pageActive">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</nav>
</div>
</div>
</div>
</section>
<!-------学生考勤手工添加弹窗------------>
<div class="container main1" id="main1">
<div class="container-fluid addinfo-title1 row">
<h4>手工添加考勤信息</h4>
<ul class="breadcrumb main1-subtitle col-lg-12 col-xs-12">
<li><a href="#">首页</a></li>
<li><a href="#">考勤管理</a></li>
<li><a href="#">学生出勤明细表</a></li>
<li><a href="#">手工添加学生出勤</a></li>
</ul>
</div>
<div class="container ">
<div class="row col-md-offset-3 addinfo_content1">
<div class="input-group">
<label for="" >打卡日期：</label>
<input type="text" class="student_info1 laydate-icon " onclick="laydate()" />
</div>
<div class="input-group">
<label for="" >星 期：</label>
<input type="text" class="student_info1 laydate-icon " />
</div>
<div class="input-group">
<label for="" >卡 号：</label>
<input type="text" class="student_info1" />
</div>
<div class="input-group">
<label for="" >姓 名：</label>
<input type="text" class="student_info1" />
</div>
<div class="input-group">
<label for="" >性 别：</label>
<input type="text" class="student_info1" />
</div>
<div class="input-group">
<label for="" >班 级：</label>
<input type="text" class="student_info1" />
</div>
<div class="input-group">
<label for="" >入园时间：</label>
<input type="text" class="student_info1" />
</div>
<div class="input-group">
<label for="" >离园时间：</label>
<input type="text" class="student_info1" />
</div>
<span class="btn addAttend_btn1 addAttend_btn1-1" id="main1_Confirm">确认</span>
<span class="btn addAttend_btn1" id="Cancel_addAttend">取消</span>
</div>
</div>
</div>
<!----请假信息------->
<section class="sec1 container"><!--请假管理--->
<div class="row container-fluid sec1-head">
<h4 class="col-lg-6 ">学生请假明细表</h4>
<div class="col-lg-6">
<!--<div class="myfont1 close1 pull-right">�</div>-->
<div class="myfont1 down-arrow pull-right">�</div>
</div>
</div>
<div class="container sec1-Sch"><!--搜索框--->
<div class="row">
<div class="col-lg-4">
<a href="#" class="btn btn1" id="add_leave">添加请假信息+</a>
</div>
<div class=" sec1-search col-lg-8 ">
<span class="myfont1 sec1-search-icon pull-right">�</span>
<input type="text" placeholder="学号..." class="form-control sec1-input pull-right"/>
<input type="text" placeholder="学生姓名..." class="form-control sec1-input pull-right"/>
<span class="pull-right">搜索：</span>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="table-responsive">
<table class="table table-striped table-bordered " id="leave_table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>班级</th>
<th>请假日期</th>
<th>销假日期</th>
<th>请教事由</th>
<th>备注</th>
<th>选择</th>
</tr>
<tr>
<td>20160101</td>
<td>李常茹</td>
<td>女</td>
<td>小一班</td>
<td>2016.10.10</td>
<td>2016.10.11</td>
<td>病假</td>
<td>学生妈妈打电话过来请假</td>
<td>
<input type="checkbox" class="sec2-checkBox"/>
</td>
</tr>
<tr>
<td>20160101</td>
<td>叱云南</td>
<td>男</td>
<td>小一班</td>
<td>2016.10.10</td>
<td>2016.10.11</td>
<td>打游戏</td>
<td>学生妈妈打电话过来请假</td>
<td>
<input type="checkbox" class="sec2-checkBox"/>
</td>
</tr>
<tr>
<td>20160101</td>
<td>叱云柔</td>
<td>女</td>
<td>小一班</td>
<td>2016.09.10</td>
<td>2016.10.01</td>
<td>病假</td>
<td>学生妈妈打电话过来请假</td>
<td>
<input type="checkbox" class="sec2-checkBox"/>
</td>
</tr>
<tr>
<td>20160101</td>
<td>李长乐</td>
<td>女</td>
<td>小一班</td>
<td>2016.11.10</td>
<td>2016.11.11</td>
<td>病假</td>
<td>学生妈妈打电话过来请假</td>
<td>
<input type="checkbox" class="sec2-checkBox"/>
</td>
</tr>
</table>
</div>
<div class="row sec1-select">
<!--<a href="#">全选</a><span> </span><a href="#" >反全选</a><span> </span><a href="#" >删除</a>-->
<div class="btn btn2" id="sec2-selectAll">全选</div>
<div class="btn btn2" id="sec2-Unselect">反全选</div>
<a href="#" class="btn btn2" id="Edit_addleave">编辑</a>
<div class="btn btn2" id="sec2-Del">删除</div>
<div class="btn btn2">推送邮件</div>
<div class="btn btn2">导出</div>
</div>
<div class="row sec1-page">
<nav class="pull-right">
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#" class="sec1-pageActive">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</nav>
</div>
</div>
</div>
</section>
<!-------学生请假手工添加弹窗------------>
<div class="container main2" id="main2">
<div class="container-fluid addinfo-title2 row">
<h4>录入学生请假信息</h4>
<ul class="breadcrumb main1-subtitle col-lg-12 col-xs-12">
<li><a href="#">首页</a></li>
<li><a href="#">考勤管理</a></li>
<li><a href="#">学生请假明细表</a></li>
<li><a href="#">录入学生请假信息</a></li>
</ul>
</div>
<div class="container ">
<div class="row col-md-offset-3 addinfo-content2">
<div class="input-group">
<label for="" >学 号：</label>
<input type="text" class="student_info2"/>
</div>
<div class="input-group">
<label for="" >姓 名：</label>
<input type="text" class="student_info2"/>
</div>
<div class="input-group">
<label for="" >性 别：</label>
<input type="text" class="student_info2"/>
</div>
<div class="input-group">
<label for="" >班 级：</label>
<input type="text" class="student_info2"/>
</div>
<div class="input-group">
<label for="" >请假日期：</label>
<input type="text" class="student_info2 laydate-icon " onclick="laydate()"/>
</div>
<div class="input-group">
<label for="" >销假日期：</label>
<input type="text" class="student_info2 laydate-icon " onclick="laydate()"/>
</div>
<div class="input-group">
<label for="" >请假事由：</label>
<textarea class="student_info2"></textarea>
</div>
<div class="input-group">
<label for="" >备 注：</label>
<textarea class="student_info2"></textarea>
</div>
<span class="btn addAttend_btn1 addAttend_btn1-1" id="main2_Confirm">确认</span>
<span class="btn addAttend_btn1" id="Cancel_addleave">取消</span>
</div>
</div>
</div>
<script src="dist/js/jquery-1.11.3.js"></script>
<script src="dist/js/bootstrap.js"></script>
<script>
$(function(){
;!function(){
laydate({
elem: '#demo'
})
}();
//考勤中的全选和反全选
$("#selectAll").click(function(){
$(".sec1-checkBox").prop("checked",true);
});
$("#Unselect").click(function(){
$(".sec1-checkBox").prop("checked",false)
});
//考勤管理中的删除
$("#sec1-Del").click(function () {
$(".sec1-checkBox").each(function () {
if ($(this).prop("checked")==true) {
$(this).closest("tr").remove();
}
});
});
//请假管理中的全选和反全选
$("#sec2-selectAll").click(function(){
$(".sec2-checkBox").prop("checked",true);
});
$("#sec2-Unselect").click(function(){
$(".sec2-checkBox").prop("checked",false)
});
//请假管理中的删除
$("#sec2-Del").click(function () {
$(".sec2-checkBox").each(function () {
if ($(this).prop("checked")==true) {
$(this).closest("tr").remove();
}
});
});
//添加信息中的弹窗
$("#add-Attend").click(function(){
$("#main1").css({
"display":"block"
})
});
$("#add_leave").click(function(){
$("#main2").css({
"display":"block"
})
});
$("#Edit_addleave").click(function(){
$("#main2").css({
"display":"block"
})
});
//弹窗取消
$("#Cancel_addAttend").click(function(){
$("#main1").css({
"display":"none"
})
});
$("#Cancel_addleave").click(function(){
$("#main2").css({
"display":"none"
})
});
//手工添加打卡信息
$("#main1_Confirm").click(function(){
var $tr=$("<tr></tr>");
$(".addinfo_content1 input:text").each(function (index,domEle) {
var $td = $("<td></td>");
$td.append($(domEle).val());
$td.appendTo($tr);
});
var $td=$("<td><input type='checkbox' class='sec1-checkBox'/></td>");
$td.appendTo($tr);
$tr.appendTo("#attendence_table");
$("#main1").css({
"display":"none"
})
});
//手工录入请假信息
$("#main2_Confirm").click(function(){
var $tr=$("<tr></tr>");
// var $textarea=$("<textarea></textarea>");
$(".addinfo-content2 input:text").each(function (index,domEle) {
var $td = $("<td></td>");
$td.append($(domEle).val());
$td.appendTo($tr);
});
$(".addinfo-content2 textarea").each(function(n,domele){
var $td = $("<td></td>");
$td.append($(domele).val());
$td.appendTo($tr);
});
var $td=$("<td><input type='checkbox' class='sec2-checkBox'/></td>");
$td.appendTo($tr);
$tr.appendTo("#leave_table");
$("#main2").css({
"display":"none"
});
$(window).scrollTop(540);
});
})
</script>
</body>
</html>
下面的代码转载自 http://blog.csdn.net/wo1354691371/article/details/7384829
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现添加、移除表格</title>
</head>
<style>
table{
margin:auto auto;
background-color:#9FC;}
td{
80px;}
</style>
<script language="JavaScript" type="text/javascript" src="../../include/jquery.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function (){
$("#btn1").click(function (){
//创建tr节点
var $tr=$("<tr></tr>");
//遍历获取输入的内容
$("#info input:text").each(function (index,domEle){
//添加td节点
var $td=$("<td></td>");
//将内容循环添加到创建好的TD中
$td.append($(domEle).val());
//将td添加到创建好的TR 中
$td.appendTo($tr);
});
//创建TD--删除
var $td=$("<td><a href='#' class='del'>delete</a></td>");
//将内容循环添加到创建好的TD中
$td.appendTo($tr);
$tr.appendTo("#tab");
//执行删除操作
$(".del").click(function (){
//alert("@@@@@@@@@@@@");
$(this).parent().parent().remove();
});
});
});
</script>
<body>
<form id="info" method="post">
姓名：<input type="text" id="user">
班级：<input type="text" id="greed">
年龄：<input type="text" id="age">
<input type="button" id="btn1" value="添加">
</form>
<br>
<br>
<br>
<table id="tab" border="1">
<tr id="t1">
<td>姓名</td>
<td>班级</td>
<td>年龄</td>
<td>是否删除</td>
</tr>
</table>
</body>
</html>
效果是这样的：
