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

Javascript
为调试JavaScript添加输出窗口的代码
Js 中debug方式
一些mootools的学习资源
JavaScript 精粹读书笔记(1,2)
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
数组Array进行原型prototype扩展后带来的for in遍历问题
javascript 鼠标拖动图标技术
比较搞笑的js陷阱题
js 自定义的联动下拉框
js 省地市级联选择
JavaScript 类似flash效果的立体图片浏览器
JavaScript Event学习第九章 鼠标事件
jQuery AJAX回调函数this指向问题
toString()一个会自动调用的方法
jQuery 文本框模拟下拉列表效果
关于页面被拦截的问题
javascript 解析url的search方法
一个XML格式数据转换为图表的例子
Javascript 获取链接(url)参数的方法[正则与截取字符串]
一些收集整理非常不错的JS效果代码

No. « 285 286 287 288 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-02-27   浏览: 48 ::
收藏到网摘: 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)