To do a questionnaire, the number of questions is uncertain, answer questions and answers uncertain.
To achieve this effect, click on the button below to add 4 answer boxes, choose from A-Z 26 letters, is to Assic code to facilitate processing
Look at the HTML results
| The code is as follows |
Copy Code |
| <table width= "100%" class= "form" >
<tr>
Th width= "100px" ><label> title 1:</label></th>
<TD align= "left" ><input type= "text" class= "large" id= "title" Name= "title"/> <span class= " Error > Please enter the title </span></td>
</tr>
<tr>
<th width= "100px" ><label> selection type:</label></th>
<TD align= "Left" >
<input type= "Radio" name= "Radio"/> Radio
<input type= "Radio" name= "Boxcheck"/> Multiple selection
<input type= "Radio" name= "select"/> dropdown
</td>
</tr>
<tr>
<th width= "100px" ><label> answer:</label></th>
<TD align= "Left" >
<div>
<div style= "Float:left" id= "1" >
A:<input type= "text" class= "Mimi" Name= "A"/>
B:<input type= "text" class= "Mimi" Name= "B"/>
C:<input type= "text" class= "Mimi" Name= "C"/>
D:<input type= "text" class= "Mimi" Name= "D"/>
</div>
</div>
<div class= "More" onclick= "Add_ask ($ (this))" > </div>
</td>
</tr>
</table> Through this HTML result above, and then through JS implementation function Add_ask ($this)
{
var $Word = "";
Get Front div layer
var $div _num = $this. Prev (). Children (). attr ("id");
Add Layers
var $div _next_num = number ($div _num) +1;
var $last _children_name = $this. Prev (). Children (). Last (). Children (). Last (). attr ("name"). charCodeAt ();
var $html = "<div style=\" float:left;\ "id=" + $div _next_num+ ">";
Cycle four times
if ($last _children_name+4 <= 90)
{
for (var $i =1; $i <=4; $i + +)
{
$Word = String.fromCharCode ($last _children_name + $i);
$html + + $Word + ": <input type=\" text\ "class=\" mimi\ "name=" + $Word + "/>";
}
}else
{
$end = 90-$last _children_name;
for (var $i =1; $i <= $end; $i + +)
{
$Word = String.fromCharCode ($last _children_name + $i);
$html + + $Word + ": <input type=\" text\ "class=\" mimi\ "name=" + $Word + "/>";
}
}
$html + + "</div>";
$this. Prev (). append ($html);
} |
The above JS is implemented through jquery, the principle is very simple answer, I don't say too much.
Clever place is through Assic code digital conversion to achieve the option to increase
Let's look at one more jquery example
| The code is as follows |
Copy Code |
| <script type= "Text/javascript" src= "Js/jquery1.7.js" ></script>
<script type= "Text/javascript" >
$ (function () {
var show_count = 20; Number of bars to display
var count = 1; Increment start value, here is your ID
$ ("#btn_addtr"). Click (function () { var length = $ ("#dynamicTable tbody tr"). Length;
alert (length);
if (length < Show_count)//Click Time, if the current number is less than the incremental end condition
{
$ ("#tab11 tbody tr"). Clone (). Appendto ("#dynamicTable tbody"); Add a row after the table
Changeindex ()//Update line number
}
});
});
function Changeindex () {
var i = 1;
$ ("#dynamicTable tbody tr"). each (function () {//cyclic tab TBODY TR
$ (this). Find ("Input[name= ' NO ']"). Val (i++);//Update line number
});
}
function deltr (OPP) {
var length = $ ("#dynamicTable tbody tr"). Length;
alert (length);
if (length <= 1) {
Alert ("Keep at least one row");
} else {
$ (OPP). Parent (). Parent () remove ();//Remove When moving forward
Changeindex ();
}
}
</script> <body> <div style= "width:720px;margin:20px auto;" > <table id= "Tab11" style= "Display:none" >
<tbody>
<tr>
<TD height= align= "center" >
<input type= "text" name= "NO" size= "2" value= "1"/></td>
<TD align= "center" >
<input type= "text" name= "Start_end_time"/></td>
<TD align= "center" >
<input type= "text" name= "Unit_department"/></td>
<TD align= "center" >
<input type= "text" name= "POST"/></td>
<td>
<input type= "button" id= "Button1" onclick= "deltr (This)" value= "Delete Line" >
</td>
</tr>
</tbody>
</table>
<input type= "button" id= "BTN_ADDTR" value= "Add Line" >
<table id= "dynamictable" width= "M" border= "0" cellspacing= "0" cellpadding= "0" >
<thead>
<tr>
<TD height= align= "center" bgcolor= "#CCCCCC" >ID</td>
<TD align= "center" bgcolor= "#CCCCCC" > Starting and Ending Time </td>
<TD align= "center" bgcolor= "#CCCCCC" > unit/Department </td>
<TD align= "center" bgcolor= "#CCCCCC" > Position </td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<TD height= align= "center" >
<input type= "text" name= "NO" size= "2" value= "1"/></td>
<TD align= "center" >
<input type= "text" name= "Start_end_time"/></td>
<TD align= "center" >
<input type= "text" name= "Unit_department"/></td>
<TD align= "center" >
<input type= "text" name= "POST"/></td>
<td>
<input type= "button" id= "Button2" onclick= "deltr (This)" value= "Delete Line" >
</td>
</tr>
</tbody>
</table> </div> </body>
|
