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