JQuery 添加节点

Posted 2020-08-23 potato~~

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery 添加节点相关的知识，希望对你有一定的参考价值。

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 添加节点的主要内容，如果未能解决你的问题，请参考以下文章

js怎样添加、移除、移动、复制、创建和查找节点？

常用Javascript代码片段集锦

关于jquery tree 树形菜单动态添加子节点的问题

为啥添加了jQuery还是报错？？？求大神帮帮忙

pbootcms对接微信扫码登录代码核心片段和步骤（前后端）

jquery怎么获取当前节点的前一个节点