这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 动态添加选项的方法, 结合实例形式分析了 javascript 针对页面元素动态操作的相关技巧, 需要的朋友可以参考下
本文实例分析了 JS 动态添加选项的方法。分享给大家供大家参考,具体如下:
一、问题:
要做一个调查问卷,问题数量不定,问答答案不定。
JS 控答案效果图
二、实现方法:
为了实现这个效果,点击那个按钮就在下面添加 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 码数字转换来实现选项增加。
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0715/331130.html