亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JS動態(tài)添加選項案例分析

 更新時間:2016年10月17日 10:26:56   作者:dengwz7788  
這篇文章主要介紹了JS動態(tài)添加選項的方法,結(jié)合實例形式分析了javascript針對頁面元素動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下

本文實例分析了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" />&nbsp;<span class="error">請輸入標(biāo)題</span></td>
  </tr>
  <tr>
  <th width="100px"><label>選擇類型:</label></th>
  <td align="left">
  <input type="radio" name="radio" />單選&nbsp;&nbsp;&nbsp;
  <input type="radio" name="boxcheck" />多選&nbsp;&nbsp;&nbsp;
  <input type="radio" name="select" />下拉&nbsp;&nbsp;&nbsp;
  </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))">&nbsp;</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è)計有所幫助。

相關(guān)文章

  • JavaScript從0開始構(gòu)思表情插件

    JavaScript從0開始構(gòu)思表情插件

    在項目開發(fā)階段很多項目都會用到表情插件,接下來通過本文給大家介紹了JavaScript從0開始構(gòu)思表情插件 的相關(guān)資料,需要的朋友可以參考下
    2016-07-07
  • BootStrap智能表單實戰(zhàn)系列(七)驗證的支持

    BootStrap智能表單實戰(zhàn)系列(七)驗證的支持

    這篇文章主要介紹了BootStrap智能表單實戰(zhàn)系列(七)驗證的支持 ,凡是涉及到用戶編輯信息然后保存的頁面,都涉及到一個數(shù)據(jù)是否符合要求的檢查,需要客服端和服務(wù)器端的校驗的問題,本文介紹非常詳細(xì),具有參考價值,需要的朋友可以參考下
    2016-06-06
  • JS拖拽排序插件Sortable.js用法實例分析

    JS拖拽排序插件Sortable.js用法實例分析

    這篇文章主要介紹了JS拖拽排序插件Sortable.js用法,結(jié)合實例形式分析了拖拽排序插件Sortable.js功能、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下
    2019-02-02
  • js使彈層下面的body禁止?jié)L動

    js使彈層下面的body禁止?jié)L動

    這篇文章介紹了js使彈層下面body禁止?jié)L動的方法,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-06-06
  • javascript動畫之模擬拖拽效果篇

    javascript動畫之模擬拖拽效果篇

    其實javascript本身是具有原生拖放功能的,但是由于兼容性問題,以及功能實現(xiàn)的方式,用的不是很廣泛。javascript動畫廣泛使用的還是模擬拖拽。本文將詳細(xì)介紹javascript的模擬拖拽,有需要的可以參考借鑒。
    2016-09-09
  • js或者jquery判斷圖片是否加載完成實現(xiàn)代碼

    js或者jquery判斷圖片是否加載完成實現(xiàn)代碼

    需要獲得圖片的寬度和高度,有些js或者jquery代碼在還沒有加載完圖片時就執(zhí)行了,這個問題該怎么解決呢?接下來分別介紹下js與jquery提供的方法
    2013-03-03
  • 如何安裝控制器JavaScript生成插件詳解

    如何安裝控制器JavaScript生成插件詳解

    這篇文章主要給大家介紹了關(guān)于如何安裝控制器JavaScript生成插件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-10-10
  • 詳解微信小程序中的頁面代碼中的模板的封裝

    詳解微信小程序中的頁面代碼中的模板的封裝

    這篇文章主要介紹了詳解微信小程序中的頁面代碼中的模板的封裝的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下
    2017-10-10
  • js實現(xiàn)遮罩層劃出效果是生成div而不是顯示

    js實現(xiàn)遮罩層劃出效果是生成div而不是顯示

    單純的遮蓋層劃出是比較簡單的,而本例介紹的這個就有點難度,生成div,而不是顯示存在的div,需要的朋友可以參考下
    2014-07-07
  • 如何在CocosCreator中使用JSZip壓縮

    如何在CocosCreator中使用JSZip壓縮

    這篇文章主要介紹了在CocosCreator中使用JSZip壓縮,對JSZip感興趣的同學(xué),不妨看一下,并且親自試一試
    2021-04-04

最新評論