JS動態(tài)添加選項案例分析
本文實例分析了JS動態(tài)添加選項的方法。分享給大家供大家參考,具體如下:
一、問題:
要做一個調(diào)查問卷,問題數(shù)量不定,問答答案不定。
JS控答案效果圖
二、實現(xiàn)方法:
為了實現(xiàn)這個效果,點擊那個按鈕就在下面添加4個答案框,選擇從A-Z這26個字母,就是為了ASSIC碼方便處理
看看HTML結(jié)果
<table width="100%" class="form"> <tr> <th width="100px"><label>標(biāo)題1:</label></th> <td align="left"><input type="text" class="large" id="title" name="title" /> <span class="error">請輸入標(biāo)題</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結(jié)果,然后通過JS 實現(xiàn)
function add_ask($this) { var $Word =""; //獲取前面div層數(shù) 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+">"; //進(jìn)行四次循環(huán) 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實現(xiàn),原理很簡答,我就不說太多了。
巧妙的地方就是通過assic碼數(shù)字轉(zhuǎn)換來實現(xiàn)選項增加。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
- JS動態(tài)添加option和刪除option(附實例代碼)
- javascript實現(xiàn)的動態(tài)添加表單元素input,button等(appendChild)
- js 動態(tài)添加標(biāo)簽(新增一行,其實很簡單,就是幾個函數(shù)的應(yīng)用)
- JS中動態(tài)添加事件(綁定事件)的代碼
- JS動態(tài)添加Table的TR,TD實現(xiàn)方法
- JS實現(xiàn)下拉框的動態(tài)添加(附效果)
- Js實現(xiàn)動態(tài)添加刪除Table行示例
- js下為表格內(nèi)部動態(tài)添加行的代碼
- javascript動態(tài)添加表格數(shù)據(jù)行(ASP后臺數(shù)據(jù)庫保存例子)
- javascript動態(tài)添加、修改、刪除對象的屬性與方法詳解
- javascript 動態(tài)添加表格行
- javascript 動態(tài)添加事件代碼
相關(guān)文章
BootStrap智能表單實戰(zhàn)系列(七)驗證的支持
這篇文章主要介紹了BootStrap智能表單實戰(zhàn)系列(七)驗證的支持 ,凡是涉及到用戶編輯信息然后保存的頁面,都涉及到一個數(shù)據(jù)是否符合要求的檢查,需要客服端和服務(wù)器端的校驗的問題,本文介紹非常詳細(xì),具有參考價值,需要的朋友可以參考下2016-06-06js或者jquery判斷圖片是否加載完成實現(xiàn)代碼
需要獲得圖片的寬度和高度,有些js或者jquery代碼在還沒有加載完圖片時就執(zhí)行了,這個問題該怎么解決呢?接下來分別介紹下js與jquery提供的方法2013-03-03