<pre><pre><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </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;d isplay: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>
<body>
<div class= "Container" >
<table id= "longtable" class= "Form-horizontal" >
<tr class= "Form-group" ><td colspan= "1" > Customer name:</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" > Authentication code </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" > Authorized person:</td>
<TD colspan= "5" > <button onclick= "Addperson ()" class= "btn btn_import mr_20" style= "margin-top:-5px;" > Add an authorized person </button></td>
</tr>
<tr class= "Form-group" ><th class= "Form-group" ></th><th class= "Form-group" ><center> Name </center></th><th class= "Form-group" ><center> title </center></th><th class= "Form-group" ><center> Document type </center></th><th class= "Form-group" ><center> ID number < /center></th><th class= "Form-group" ><center> operations </center></th></tr>
<tr class= "Form-group" ><td colspan= "1" > Remarks:</td>
<TD colspan= "5" >
<textarea class= "Form-control w500 h100" id= "Memo" Name= "Memo" rows= "5" cols= "></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" > OK set </button>
<input type= "reset" onclick= "history.go (0);" id= "Cancel" value= " pick Eliminate " class= "btn Btn-default BTN-LG ">
</td></tr>
</table>
</div>
</body>
<script>
var optionhtml = new Array ();
/**
* Initialize data dictionary information document type
* Save the data in the optionhtml array
*/
var arr = ["ID card", "Identity card", "Identity card", "Identity card", "Identity card", "identity card"];
$ (function () {
Set the document Type drop-down box for the template
optionhtml.length = 0;
for (var i = 0; i < 6; i++) {
Optionhtml.push ("<option value= '" +i+ ">" + arr[i] + "</option>");
}
});
/**
* Click the next event function
*/
function Next () {
if (' 2 ' ==$ ("#cwfType"). Val ()) {
$ ("#long_cwf"). Show ();
$ ("#cwfTypeSelect"). Hide ();
}
};
/**
*js automatic generation of five authorized person columns
* Generate Rule 1, add the authorized person
*/
var j = 1;
var Arraya = new Array ();
function Addperson () {
if (arraya.length<5) {
Ensure that the last authorized person's information is filled in when the next grantee is added
/**
if (' ==$ ' ("#name" + (J-1)). val () | | ==$ ("#position" + (J-1)). val () | | ==$ ("#cardNo" + (J-1)). Val ()) {
Art.dialog ({
Lock:true,
Background: ' #600 ',//Background color
Esc:true,
opacity:0.87,//Transparency
Content: ' Please fill in the Authorized personnel information first! ‘,
Skin: ' Default ',
Icon: ' Alert ',
Yestext: ' OK ',
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+ "); ' > Delete </a></td></tr> ");
Arraya.push (j);
j + +;
}else{
Art.dialog ({
Content: ' Add up to five authorized people! ‘,
Skin: ' Default ',
Icon: ' Alert ',
Lock:true,
Esc:true,
Yestext: ' OK ',
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: ' names cannot be empty or contain special characters ',
Skin: ' Default ',
Icon: ' Alert ',
Lock:true,
Esc:true,
Yestext: ' OK ',
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 ("The position cannot be empty or contains ^%& ',; =?$\" etc.);
$ ("#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 ("The ID number is not valid");
$ ("#cardNo" +s). focus (); return false;
}else{
return true;
}
}
</script>
JS adds a new row after the specified table row (JS implements the fill of select data, adds rows, deletes rows)
