您正在使用IPV4(54.161.98.96)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年74元      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 情人节 18
2022年 元宵节 19
2023年 元 旦 339
2022年 春 节 5
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    JavaScript实现动态生成表格案例详解
    内容摘要: !DOCTYPEhtmlhtmlheadlang='en'metacharset='UTF-8'title/titlestyle*{padding:0;margin:0;}table{width:410px;margin:100pxauto0;text-align:center;border-collapse:collapse;border-spacing:......
    <!DOCTYPEhtml>

    <html>

    <headlang="en">

    <metacharset="UTF-8">

    <title></title>

    <style>

    *{

    padding:0;

    margin:0;

    }

    table{

    width:410px;

    margin:100pxauto0;

    text-align:center;

    border-collapse:collapse;

    border-spacing:0;

    border:1pxsolid#ccc;

    }

    th,

    td{

    width:150px;

    height:40px;

    border:1pxsolid#ccc;

    padding:10px;

    }

    a{

    text-decoration:none;

    }

    .btnAdd{

    width:110px;

    height:30px;

    font-size:20px;

    }

    .item{

    position:relative;

    padding-left:100px;

    padding-right:20px;

    margin-bottom:34px;

    }

    .lb{

    position:absolute;

    left:0;

    top:0;

    display:block;

    width:100px;

    text-align:right;

    }

    .txt{

    width:300px;

    height:32px;

    }

    .form-add{

    position:absolute;

    top:100px;

    left:578px;

    border:1pxsolid#ccc;

    margin-left:-197px;

    padding-bottom:20px;

    display:none;

    }

    .title{

    background-color:#f7f7f7;

    border-width:1px1px01px;

    border-bottom:0;

    margin-bottom:15px;

    position:relative;

    }

    span{

    width:auto;

    height:18px;

    font-size:16px;

    color:rgb(102,102,102);

    text-indent:12px;

    padding:8px0px10px;

    margin-right:10px;

    display:block;

    overflow:hidden;

    text-align:left;

    }

    .titlediv{

    width:16px;

    height:20px;

    position:absolute;

    right:10px;

    top:6px;

    font-size:30px;

    line-height:16px;

    cursor:pointer;

    }

    .submit{

    text-align:center;

    }

    .submitinput{

    width:170px;

    height:32px;

    }

    </style>

    </head>

    <body>

    <!--按钮和表单-->

    <table>

    <thead>

    <tr>

    <th>班级</th>

    <th>姓名</th>

    <th>学号</th>

    <th>操作</th>

    </tr>

    </thead>

    <tbodyid="j_tb">

    <tr>

    <td>1班</td>

    <td>小王</td>

    <td>001</td>

    <td><ahref="javascrip:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"class="get">删除</a></td>

    </tr>

    <tr>

    <td>2班</td>

    <td>小熊</td>

    <td>002</td>

    <td><ahref="javascrip:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"class="get">删除</a></td>

    </tr>

    </tbody>

    <tfoot>

    <tr>

    <tdid="j_btnAddData"class="btnAdd"colspan="4">添加数据</td>

    </tr>

    </tfoot>

    </table>

    <!--添加数据的表单-->

    <divid="j_formAdd"class="form-add">

    <divclass="title">

    <span>添加数据</span>

    <divid="j_hideFormAdd">×</div>

    </div>

    <divclass="item">

    <labelclass="lb"for="">班级:</label>

    <inputclass="txt"type="text"id="classes"placeholder="请输入班级">

    </div>

    <divclass="item">

    <labelclass="lb"for="">姓名:</label>

    <inputclass="txt"type="text"id="uname"placeholder="请输入姓名">

    </div>

    <divclass="item">

    <labelclass="lb"for="">学号:</label>

    <inputclass="txt"type="text"id="order"placeholder="请输入学号">

    </div>

    <divclass="submit">

    <inputtype="button"value="添加"id="j_btnAdd">

    </div>

    </div>

    </body>

    </html>

    <scriptsrc="jquery.js"></script>

    <script>

    $(function(){

    $('#j_btnAddData').click(function(){

    $('#j_formAdd').show();

    $('table').hide()

    });

    $('#j_hideFormAdd').click(function(){

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

    $('table').show()

    });

    $('#j_btnAdd').click(function(){

    $('table').show()

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

    varclasses=$('#classes').val();

    varuname=$('#uname').val();

    varorder=$('#order').val();

    varNew=$('<tr>'+

    '<td>'+classes+'</td>'+

    '<td>'+uname+'</td>'+

    '<td>'+order+'</td>'+

    '<td><ahref="javascrip:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"class="get">删除</a></td>'+

    '</tr>');

    $('#j_tb').append(New);

    });

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

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

    });

    });

    </script><fontface="Arial,Verdana,sans-serif"><spanstyle="white-space:normal;"></span></font>

    上一篇:jQuery实现切换隐藏与显示同时切换图标功能 下一篇:一段css代码让弹窗在页面中居中
    发布日期:2021/12/22
    手机扫二维码直达本页
    发布时间:12:22:02
    点击:181
    录入:壹家怡园
    相关文章
    Baidu
    YiJiaCMS 6.1.0.10988 Build 21.12.28(MSSQL) 闽ICP备05000814号-1
    本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护

    Copyright©2000-2022