当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript DOM 学习第七章 表单的扩展

Javascript
js select 标签选定项的值获取代码
js GridView 实现自动计算操作代码
Discuz 公告效果（自动换行，无间隙滚动）
js 动态添加标签（新增一行，其实很简单，就是几个函数的应用）
JS 常用校验函数
HTML代码中标签的全部属性 中文注释说明
input 高级限制级用法
js onpropertychange输入框 事件获取属性
Javascript 生成无限下拉列表实现代码
javascript 极速 隐藏/显示万行表格列只需 60毫秒
用JavaScript实现单继承和多继承的简单方法
javascript 闭包函数做显隐内容
js 页面模块自由拖动实例
js Flash插入函数免激活代码
setTimeout 不断吐食CPU的问题分析
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
js 浏览器版本及版本号判断函数2009年
Javascript 原型和继承(Prototypes and Inheritance)
HTML 自动伸缩的表格Table js实现
两个INPUT同步输入的方法小结 兼容IE和firefox

No. « 130 131 132 133 »

技术文章搜索

关键字

Javascript 中的 JavaScript DOM 学习第七章 表单的扩展

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-02-27   浏览: 367 ::
收藏到网摘: n/a

这一章我会处理一个简单的W3C DOM脚本。他会帮助我们从一个新的角度来看待交互设计。 想法
假设你有一个在线的CD评级工具。你希望用户查看他们喜欢的所有CD。但是你怎么知道用户平均会查看多少张呢？你在这个页面上需要添加多少字段呢？
在W3CDOM出现之前这确实是一个问题。假设你放置了7张CD。但是用户很可能只想查看一张，太多可能会吓着用户，而有些用户想查看自己的所有CD，这样就不得不反复提交很多次。这确实很烦人。
只有使用W3C DOM才能让用户决定生成多少个字段。这个效果和之前的大不相同。
例子
当你点击发送的时候，表单就会把得到的所有参数以数组的形式发送。这用来检查是否真正的发送到了服务器端。不幸的是，mac版的IE和Safari不能发送。
IE的问题
windows下的IE有两个严重的问题：
第一个问题是所有生成的单选框都同属于一个数组，即使他们的names不同。这样用户就只能在所有的单选框里面选择一个。也就是说你不能在生成的表单里面实用单选框。
有读者说通过innerHTML生成的单选框没有问题。如果你非要实用单选框的话，你可以试试。
第二个问题是生成的表单通过传统的document.forms无法访问：IE没有在数组里面包含他们。这个可以通过给他们设置ID来解决。
解释
表单的HTML代码：
复制代码 代码如下:

<div id="readroot" style="display: none">
<input type="button" value="Remove review"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
<input name="cd" value="title" />
<select name="rankingsel">
<option>Rating</option>
<option value="excellent">Excellent</option>
<option value="good">Good</option>
<option value="ok">OK</option>
<option value="poor">Poor</option>
<option value="bad">Bad</option>
</select><br /><br />
<textarea rows="5" cols="20" name="review">Short review</textarea>
<br />Radio buttons included to test them in Explorer:<br />
<input type="radio" name="something" value="test1" />Test 1<br />
<input type="radio" name="something" value="test2" />Test 2
</div>
<form method="post" action="/cgi-bin/show_params.cgi">
<span id="writeroot"></span>
<input type="button" id="moreFields" value="Give me more fields!" />
<input type="submit" value="Send form" />
</form>

真正的表单项目在ID为readroot的DIV并且display值为none。这个DIV是一个模板，用户不能修改。当用户需要更多的表单的时候我们就复制这个模板然后添加在表单之后。我们在一开始的就加载，这样当用户打开页面的时候就能看到。
这个DIV在表单之外，所以当用户提交表单的时候，这个模板的内容不会被提交。
ID为writeroot的SPAN是一个标记。新的生成的表单就插入在他的前面。
添加表单项目
下面的代码可以再需要的时候用来添加表单项目：
复制代码 代码如下:

var counter = 0;
function moreFields() {
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
window.onload = moreFields;

首先我们需要一个计数器counter，因为所有的表单项都应该有唯一的一个名字。我们把计数器的值添加在生成name后面。初始化计数器：
复制代码 代码如下:
var counter = 0;

然后是实际的函数。我们给计数器加1：
复制代码 代码如下:

function moreFields() {
counter++;

然后复制我们的模板，移除ID，并且把display设置为block。readroot应该是整个文档里面唯一的ID，复制模板后应该显示出来让用户看到。
复制代码 代码如下:

var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';

我们遍历这个拷贝的子元素：
复制代码 代码如下:

var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {

如果子元素有name属性，那么我们就在name值上加上计数器的值，以保证他的唯一性：
复制代码 代码如下:

var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}

现在这个拷贝已经准备好插入了。我们把他插入到writeroot之前：
复制代码 代码如下:
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}

然后我们在页面加载的时候就执行一次，这样用户进入的时候就能看到：
复制代码 代码如下:
window.onload = moreFields;

移除表单项
每一个模板的拷贝都有一个移除按钮:
复制代码 代码如下:
<input type="button" value="Remove review"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />

点击这个按钮就会从移除他的父元素（DIV）。整个生成的表单就都会消失，并且不会再出现。
翻译地址：http://www.quirksmode.org/dom/domform.html
转载请保留以下信息
作者：北玉(tw:@rehawk)