首页 > 代码库 > js在指定的table行后添加新行（js实现select数据的填充，添加行，删除行）

js在指定的table行后添加新行（js实现select数据的填充，添加行，删除行）

2024-10-29 04:08:02   206人阅读

  <pre><pre><!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>无标题文档</title>
  <style>
      body{width:900px; height:600px;margin: 0px auto; }
      body,ul,table,li,pre,dd,dt,tr,th,td,{padding:0px;border:0px; margin:0px;font-size: 14px;}
      .container{text-align:center; border:1px solid #F00;text-align:center;}
     .form-horizontal {
        position: relative;
        padding: 100px 50px;
    }
    
    .form-group {
        margin-left: 50px;
        margin-right: 50px;
        height: 35px;
    }
    .btn{color: #FFF;background-color: #62be4f;border-color: #2582d3;display: inline-block;padding: 4px 20px;margin-bottom: 0;font-size: 14px;font-weight: 400;line-height: 1.42857143;text-align: center;white-space: nowrap;vertical-align: middle;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-image: none;border: 1px solid #ffffff;border-radius: 4px;}
    .form-control{width: 100px;height: 35px;padding: 5px 2px;}
    .h100{height:100px}
    .h150{height:150px}
    .w500{width:500px;}
  </style>
<script type="text/javascript" src=http://www.mamicode.com/"jquery.js"></script>
            
  </head>
  <body>
  <div class="container">
       <table id="longTable" class="form-horizontal">
                <tr  class="form-group"><td colspan="1">客户名称：</td>
                <td colspan="5"><input id="bussName" name="bussName" type="text" class="form-control w500" autocomplete="off"></td></tr>
                <tr class="form-group"><td colspan="1" >认证码</td>
                <td colspan="5"> <input id="verifyCode" name="verifyCode" type="text" class="form-control w500"/></td>
                </tr>
                <tr id="formgroup" class="form-group"><td colspan="1" >授权人：</td>
                    <td colspan="5"> <button onclick="addPerson()" class="btn btn_import mr_20"style="margin-top:-5px;" >添加授权人</button></td>
                </tr>
                <tr class="form-group"><th class="form-group"></th><th class="form-group"><center>姓名</center></th><th class="form-group"><center>职务</center></th><th class="form-group"><center>证件类型</center></th><th class="form-group"><center>证件号码</center></th><th class="form-group"><center>操作</center></th></tr>
                <tr class="form-group" ><td colspan="1">备注:</td>
                <td colspan="5">     
                    <textarea class="form-control w500 h100 " id="memo" name="memo" rows="5" cols="50"></textarea>
                </td>
                </tr>
                <tr class="form-group" style="text-align:center"><td colspan=‘6‘>
                  <button type="button" onclick="sure();" id="submit_btn" class="btn btn-primary btn-lg">&nbsp;确&nbsp;定&nbsp; </button>
                  <input type="reset" onclick="history.go(0);" id="cancel" value=http://www.mamicode.com/" 取 消 " class="btn btn-default btn-lg">
                </td></tr>
                </table>
       
  </div>
  </body>
  </html>
 
  <script>
    var optionHtml = new Array();
        /**
         * 初始化数据字典信息证件类型
         *将数据保存到optionHtml数组中
         */
         var arr = ["身份证","身份证","身份证","身份证","身份证","身份证"];
        $(function(){
            //设置模板的证件类型下拉框
            optionHtml.length = 0;
            for(var i = 0; i < 6; i++){
                    optionHtml.push("<option value=http://www.mamicode.com/‘"+i+"‘>"+ arr[i] +"");>                }
            });
    /**
    *点击下一步的事件函数
    */
    function next(){
        if(‘2‘==$("#cwfType").val()){
            $("#long_cwf").show();
            $("#cwfTypeSelect").hide();
        }
    };
    /**
    *js自动生成五个授权人列
    *生成规则 1、添加授权人
    */
    var j =1;
    var arrayA = new Array();
    function addPerson(){
        if(arrayA.length<5){
            //保证添加下一个授权人时，上一个授权人的信息已经填写
            /**
            if(‘‘==$("#name"+(j-1)).val()||‘‘==$("#position"+(j-1)).val()||‘‘==$("#cardNo"+(j-1)).val()){
                    art.dialog({
                        lock: true,
                        background: ‘#600‘, // 背景色
                        esc:true,
                        opacity: 0.87,    // 透明度
                        content: ‘请先填写授权人员信息！‘,
                           skin: ‘default‘,
                        icon: ‘alert‘,
                        yesText: ‘确 定‘,
                        yesFn: function(){
                            return true;
                        }
                     });
                return ;
            }*/
            $("#longTable tr:eq("+(3+arrayA.length)+")").after("<tr id=‘seq"+j+"‘ class=‘form-group‘><td></td><td><input class=‘form-control‘ id=‘name"+j+"‘ type=‘text‘/></td>"
            +"<td ><input class=‘form-control‘  id=‘position"+j+"‘ type=‘text‘/></td>"
            +"<td><select class=‘form-control‘  name=‘cardType‘ type=‘text‘ id=‘cardType"+j+"‘>"+optionHtml.join(‘‘)+"</select></td>"
            +"<td><input class=‘form-control‘  id=‘cardNo"+j+"‘+  type=‘text‘  /></td>"
            +"<td><a href=‘javascript:remove("+j+");‘>删除</a></td></tr>");
            arrayA.push(j);
            j++;
        }else{
                art.dialog({
                    content: ‘最多添加五个授权人！‘,
                       skin: ‘default‘,
                    icon: ‘alert‘,
                    lock: true,
                    esc:true,
                    yesText: ‘确 定‘,
                    yesFn: function(){
                        return true;
                    }
                 });
                 return  false;
        }
    };
    function remove(t){
    var post = arrayA.indexOf(t);
    arrayA.splice(post,1);
    $("#longTable #seq"+t).remove();
    }
    function sure(){
        for(var m =0;m<arrayA.length;m++){
            var p=arrayA[m];
            if(!(name(p)&&position(p)&&cardNo(p))){
                return;
            }
        }
    }
    function name(s){
        var value=http://www.mamicode.com/$("#name"+s).val();
        var reg=new RegExp("[^%&‘,;=?$\"]+");
        if(‘‘==value||!reg.test(value)){
            art.dialog({
                    content: ‘姓名不能为空或者包含特殊字符‘,
                       skin: ‘default‘,
                    icon: ‘alert‘,
                    lock: true,
                    esc:true,
                    yesText: ‘确 定‘,
                    yesFn: function(){
                         $("#name"+s).focus();  return true;
                    }
                 });
        
            
         }else{
         return true;
         }
    }
    function position(s){
        var value=http://www.mamicode.com/$("#position"+s).val();
            var reg=new RegExp("[^%&‘,;=?$\"]+");
            //var reg = new RegExp("[^%&‘,;=?$\x22]+");
        if(!reg.test(value)||‘‘==value){
            alert("职位不能为空或者包含^%&‘,;=?$\"等字符");
          $("#position"+s).focus(); return false ;
         }else{
         return true;
         }
    }
        function cardNo(s){
        var value=http://www.mamicode.com/$("#cardNo"+s).val();
         var reg = new RegExp("^[A-Za-z0-9]+$");
        if(!reg.test(value)||‘‘==value){
             alert("证件号码不合法");
           $("#cardNo"+s).focus(); return false ;
         }else{
         return true;
         }
    }
    </script>

js在指定的table行后添加新行（js实现select数据的填充，添加行，删除行）


联系
我们