jquery表格新增行编辑效果代码-html代码-BFW代码库

代码语言：html

所属分类：表格

代码描述：jquery表格新增行编辑效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @charset "UTF-8";
    /*css 初始化 */
    html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
        margin: 0;
        padding: 0;
        color: #484848;
        font-family:"微软雅黑"
    }
    
    /*各浏览器显示不同，去掉蓝色边框*/
    fieldset, img, input, button {
        border: none;
        padding: 0;
        margin: 0;
        outline-style: none;
    }
    a{
    text-decoration:none;
    }
    ul, ol {
        list-style: none;
    }
    
    input {outline:none;
        padding-top: 0;
        padding-bottom: 0;
        font-family: "SimSun", "微软雅黑";
    }
    
    /*去掉行内替换元素空白缝隙*/
    select, input {
        vertical-align: middle;
    }
    
    /*去掉行内替换元素空白缝隙*/
    img {
        border: 0;
        vertical-align: middle;
    }
    
    select, input, textarea {
        font-size: 14px;
        margin: 0;
    }
    
    /*防止拖动 影响布局*/
    textarea {
        resize: none;
    }
    
    table {
        border-collapse: collapse;
    }
    tr{ border: none; }
    td{ border: none; }
    th{ border: none; }
    
    
    .fl{ float: left; }
    .fr{ float: right; }
    .w100{ width: 98%;margin: 20px 1%; }
    .content_mm{ float: left; width: 100%; }
    .table_100{ width: 100%;border: none; }
    .table_100 tr th{background: #0d94ff; color: #fff;border-right: 1px solid #fff; text-align: center;padding:15px; font-size: 14px;}
    .table_100 tr td{ font-size: 14px; padding: 10px 5px; }
    .text_align_c tr td{ text-align: center; }
    .text_align_c tr th{ text-align: center; }
    .text_align_l tr td{ text-align: left; }
    .text_align_l tr th{ text-align: left; }
    .text_align_r tr td{ text-align: right; }
    .text_align_r tr th{ text-align: right; }
    .title_add{ float: left;width: 100%;margin:0 0 20px 0; }
    .title_add a{ float: left; border: 1px solid #0d94ff;padding: 10px; border-radius: 5px;color: #0d94ff;margin: 0 10px 0 0; }
    .title_add a span{margin: 0 10px;}
    .td_a_1 i{margin: 0 5px;}
    .td_a_2 i{margin: 0 5px;}
    .td_a_3 i{margin: 0 5px;}
    .td_a_4 i{margin: 0 5px;}
    .td_a_1:hover{ color: #0d84e2;}
    .td_a_2:hover{background: #10ad77;}
    .td_a_3:hover{background: #ce1111;}
    .td_a_4:hover{background: #eb9c2a;}
    .td_a_1{ float: left; color: #0d94ff;margin: 5px 10px 5px 0;padding: 5px;border-radius: 5px; }/*蓝色*/
    .td_a_2{ float: left; color: #fff; background: #12bd83;margin: 5px 10px 5px 0;padding: 5px;border-radius: 5px; }/*绿色*/
    .td_a_3{ float: left; color: #fff; background: #e31414;margin: 5px 10px 5px 0;padding: 5px;border-radius: 5px; }/*红色*/
    .td_a_4{ float: left; color: #fff; background: #f8aa3a;margin: 5px 10px 5px 0;padding: 5px;border-radius: 5px; }/*黄色*/
    .expert_inp_w100{float: left;width:85%; border: 1px solid #ececec;padding: 15px 0 15px 10px; font-size: 14px; border-radius: 5px;}
    .expert_inp_w100:hover{border: 1px solid #0d94ff;}
    .expert_inp_w100:focus{border: 1px solid #0d94ff;}
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <!--添加删除专家-->
    <script type="text/javascript">
        $(function () {
          var show_count = 20;   //要显示的条数
          var count = 1;    //递增的开始值，这里是你的ID
          $("#btn_addtr").click(function () {
        
            var length = $("#dynamicTable tbody tr").length;
            //alert(length);
            if (length < show_count)    //点击时候，如果当前的数字小于递增结束的条件
            {
              $("#tab11 tbody tr").clone().appendTo("#dynamicTable tbody");   //在表格后面添加一行
              changeIndex();//更新行号
            }
          });
        
        
        });
        function changeIndex() {
          var i = 1;
          $("#dynamicTable tbody tr").each(function () { //循环tab tbody下的tr
            $(this).find("input[name='NO']").val(i++);//更新行号
          });
        }
        
        function deltr(opp) {
          var length = $("#dynamicTable tbody tr").length;
          //alert(length);
          if (length <= 1) {
            alert("至少保留一行");
          } else {
            $(opp).parent().parent().remove();//移除当前行
            changeIndex();
          }
        }
    </script>
</head>

<body>

    <div class="fr w100">

        <div class="title_add"><a href="#" id="btn_addtr"><span>新增</span></a></div>


        <div class="content_mm">
            <table border="1" class="table_100 text_align.........完整代码请登录后点击上方下载按钮下载查看