无为清净楼资源网 Design By www.qnjia.com
想法
假设你有一个在线的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)
标签:
JavaScript,DOM,表单的扩展

无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。