要做一個調查問卷，問題數量不定，問答答案不定。
為了實現這個效果，點擊那個按鈕就在下面添加4個答案框，選擇從A-Z這26個字母，就是為了ASSIC碼方便處理
看看HTML結果
| 代碼如下 |
複製代碼 |
<table width="100%" class="form">
<tr>
th width="100px"><label>標題1:</label></th>
<td align="left"><input type="text" class="large" id="title" name="title" /> <span class="error">請輸入標題</span></td>
</tr>
<tr>
<th width="100px"><label>選擇類型:</label></th>
<td align="left">
<input type="radio" name="radio" />單選
<input type="radio" name="boxcheck" />多選
<input type="radio" name="select" />下拉
</td>
</tr>
<tr>
<th width="100px"><label>答案:</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> 通過這個上面這HTML結果，然後通過JS 實現 function add_ask($this)
{
var $Word ="";
//擷取前面div層數
var $div_num = $this.prev().children().attr("id");
//增加圖層
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+">";
//進行四次迴圈
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);
} |
上面的JS 是通過jquery實現，原理很簡答,我就不說太多了。
巧妙的地方就是通過assic碼數字轉換來實現選項增加
下面再看一個jquery例子
| 代碼如下 |
複製代碼 |
<script type="text/javascript" src="js/jquery1.7.js"></script>
<script type="text/javascript">
$(function () {
var show_count = 20; //要顯示的條數
var count = 1; //遞增的開始值，這裡是你的ID
$("#btn_addtr").click(function () { var length = $("#dynamicTable tbody tr").length;
//alert(length);
if (length < show_count) //點擊時候，如果當前的數字小於遞增結束的條件
{
$("#tab11 tbody tr").clone().appendTo("#dynamicTable tbody"); //在表格後面添加一行
changeIndex();//更新行號
}
});
});
function changeIndex() {
var i = 1;
$("#dynamicTable tbody tr").each(function () { //迴圈tab tbody下的tr
$(this).find("input[name='NO']").val(i++);//更新行號
});
}
function deltr(opp) {
var length = $("#dynamicTable tbody tr").length;
//alert(length);
if (length <= 1) {
alert("至少保留一行");
} else {
$(opp).parent().parent().remove();//移除當前行
changeIndex();
}
}
</script> </head>
<body> <div style="width:720px;margin:20px auto;"> <table id="tab11" style="display: none">
<tbody>
<tr>
<td height="30" 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="刪行">
</td>
</tr>
</tbody>
</table>
<input type="button" id="btn_addtr" value="增行">
<table id="dynamicTable" width="700" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<td height="30" align="center" bgcolor="#CCCCCC">ID</td>
<td align="center" bgcolor="#CCCCCC">起止時間</td>
<td align="center" bgcolor="#CCCCCC">單位/部門</td>
<td align="center" bgcolor="#CCCCCC">職位</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td height="30" 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="刪行">
</td>
</tr>
</tbody>
</table> </div> </body>
</html> |
