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

浏览数：38 / 时间：2015年06月09日

<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="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"> 确 定  </button>
                  <input type="reset" onclick="history.go(0);" id="cancel" value=" 取 消 " 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=‘"+i+"‘>"+ arr[i] +"</option>");
               }
           });
   /**
   *点击下一步的事件函数
   */
   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=$("#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=$("#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=$("#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>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。