快捷導(dǎo)航

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

更新時(shí)間：2016年10月17日 10:26:56 作者：dengwz7788

這篇文章主要介紹了JS動(dòng)態(tài)添加選項(xiàng)的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)頁(yè)面元素動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例分析了JS動(dòng)態(tài)添加選項(xiàng)的方法。分享給大家供大家參考，具體如下：

一、問(wèn)題：

要做一個(gè)調(diào)查問(wèn)卷，問(wèn)題數(shù)量不定，問(wèn)答答案不定。

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" />&nbsp;<span class="error">請(qǐng)輸入標(biāo)題</span></td>
  </tr>
  <tr>
  <th width="100px"><label>選擇類(lèi)型:</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>

通過(guò)這個(gè)上面這HTML結(jié)果，然后通過(guò)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 是通過(guò)jquery實(shí)現(xiàn)，原理很簡(jiǎn)答,我就不說(shuō)太多了。

巧妙的地方就是通過(guò)assic碼數(shù)字轉(zhuǎn)換來(lái)實(shí)現(xiàn)選項(xiàng)增加。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: