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

Javascript
JavaScript 拖拽实现（附注释），最经典简单短小精悍！
学习drag and drop js实现代码经典之作
jquery创建div 实现代码
jquery遍历input取得input的name
jQuery 对象中的类数组操作
js 发个判断字符串是否为符合标准的函数
细品javascript 寻址,闭包,对象模型和相关问题
在IE上直接编辑网页内容的js代码(IE地址栏js)
一个选择最快的服务器转向代码
JQUERY 对象与DOM对象之转换
javascript 对象比较实现代码
jquery 获取json数据实现代码
Firefox div高度自适应
xml和web特殊字符
js 表单验证方法(实用)
ie和firefox不兼容的解决方法集合
js 数组操作代码集锦
js checkbox(复选框) 使用集锦
JS 判断代码全收集
理解JavaScript的caller,callee,call,apply

No. « 134 135 136 137 »

技术文章搜索

关键字

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

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