JQuery 添加节点

时间：2021-09-27 17:14:28

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;

            width:98%;

            border-radius: 4px;

            margin-left: 15px;

            margin-top: 20px;

            height:auto;

        }

        .down-arrow,

        .close1

        {

            display: inline-block;

            /*border:1px solid red;*/

            width: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;

            width: 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{

            width: 30%;

            margin-left: 6px;

            -webkit-transition: all linear .3s;

        }

        .sec1-input:focus{

            width: 34%;

            -webkit-transition: all linear .3s;

            outline: black;

        }

        .sec1-search-icon{

            width: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;

            width:450px;

        }

        .student_info1:focus{

            border:1px solid #4CC0C1;

        }

        .input-group{

            margin-top: 30px;

        }

        .addAttend_btn1{

            color:white;

            width: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;

            width: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{

  width: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>

　　效果是这样的：

JQuery 添加节点

相关文章