Home > Developer > Web Develop
Js adds a new line after the specified table row (js achieves select data filling, adding rows, and deleting rows), and the new line select
<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> 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; 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; 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"> 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"> Verification 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> position </center> </th> <th class = "form-group"> <center> credential type </center> </th> <th class = "form-group"> <center> credential number </center> </th> <th class = "form -group "> <center> operation </center> </th> </tr>
<Tr class = "form-group"> <td colspan = "1"> Note: </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-primary btn-lg"> & nbsp; true & nbsp; set & nbsp; </button>
<Input type = "reset" onclick = "history. go (0); "id =" cancel "value =" & nbsp; remove & nbsp; "class =" btn-default btn-lg ">
</Td> </tr>
</Table>
</Div>
</Body>
</Html>
<Script>
Var optionHtml = new Array ();
/**
* Initialize the document type of the data dictionary Information
* Save the data to the optionHtml array.
*/
Var arr = ["ID card", "ID 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 automatically generates five authorization Columns
* Generate Rules 1. Add an Authorized Person
*/
Var j = 1;
Var arrayA = new Array ();
Function addPerson (){
If (arrayA. length <5 ){
// Ensure that the information of the previous Authorizer has been filled in when the next authorizer 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: 'enter the authorization personnel information first! ',
Skin: 'default ',
Icon: 'alert ',
YesText: 'confirmed ',
YesFn: function (){
Return true;
}
});
Return;
}*/
$ ("# LongTable tr: eq (" + (3 + arrayA. length) + ")"). after ("<tr id = 'seq" + j + "'class = 'form-group'> <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: 'the maximum number of authorized persons can be added! ',
Skin: 'default ',
Icon: 'alert ',
Lock: true,
Esc: true,
YesText: 'confirmed ',
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: 'name cannot be blank or contain special characters ',
Skin: 'default ',
Icon: 'alert ',
Lock: true,
Esc: true,
YesText: 'confirmed ',
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 blank or contain ^ % & ',; =? $ \ "And other characters ");
$ ("# 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 ("invalid credential number ");
$ ("# CardNo" + s). focus (); return false;
} Else {
Return true;
}
}
</Script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
