想法 假设你有一个在线的CD评级工具。你希望用户查看他们喜欢的所有CD。但是你怎么知道用户平均会查看多少张呢?你在这个页面上需要添加多少字段呢? 在W3CDOM出现之前这确实是一个问题。假设你放置了7张CD。但是用户很可能只想查看一张,太多可能会吓着用户,而有些用户想查看自己的所有CD,这样就不得不反复提交很多次。这确实很烦人。 只有使用W3C DOM才能让用户决定生成多少个字段。这个效果和之前的大不相同。 例子 当你点击发送的时候,表单就会把得到的所有参数以数组的形式发送。这用来检查是否真正的发送到了服务器端。不幸的是,mac版的IE和Safari不能发送。 IE的问题 windows下的IE有两个严重的问题: 第一个问题是所有生成的单选框都同属于一个数组,即使他们的names不同。这样用户就只能在所有的单选框里面选择一个。也就是说你不能在生成的表单里面实用单选框。 有读者说通过innerHTML生成的单选框没有问题。如果你非要实用单选框的话,你可以试试。 第二个问题是生成的表单通过传统的document.forms无法访问:IE没有在数组里面包含他们。这个可以通过给他们设置ID来解决。 解释 表单的HTML代码: 真正的表单项目在ID为readroot的DIV并且display值为none。这个DIV是一个模板,用户不能修改。当用户需要更多的表单的时候我们就复制这个模板然后添加在表单之后。我们在一开始的就加载,这样当用户打开页面的时候就能看到。 这个DIV在表单之外,所以当用户提交表单的时候,这个模板的内容不会被提交。 ID为writeroot的SPAN是一个标记。新的生成的表单就插入在他的前面。 添加表单项目 下面的代码可以再需要的时候用来添加表单项目: 首先我们需要一个计数器counter,因为所有的表单项都应该有唯一的一个名字。我们把计数器的值添加在生成name后面。初始化计数器: 然后是实际的函数。我们给计数器加1: 然后复制我们的模板,移除ID,并且把display设置为block。readroot应该是整个文档里面唯一的ID,复制模板后应该显示出来让用户看到。 我们遍历这个拷贝的子元素: 如果子元素有name属性,那么我们就在name值上加上计数器的值,以保证他的唯一性: 现在这个拷贝已经准备好插入了。我们把他插入到writeroot之前: 然后我们在页面加载的时候就执行一次,这样用户进入的时候就能看到: 移除表单项 每一个模板的拷贝都有一个移除按钮: 点击这个按钮就会从移除他的父元素(DIV)。整个生成的表单就都会消失,并且不会再出现。 翻译地址: 转载请保留以下信息 作者:北玉(tw:@rehawk)
推荐整理分享JavaScript DOM 学习第七章 表单的扩展(js dom方法),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:js domcontentloaded,js domcontentloaded,js dom操作方法,javascript的dom操作,js dom操作方法,js中dom的用法,js dom操作方法,js dom操作方法,内容如对您有帮助,希望把文章链接给更多的朋友!
JavaScript DOM学习第八章 表单错误提示 在我看来,警告框只用在浏览器不支持其他显示错误信息的办法的时候。W3C建议我们在表单项的附近显示错误信息。这是一种很好的办法,所以我们只
JavaScript DOM 学习第九章 选取范围的介绍 虽然我们会讲解用程序创建范围对象,但是我们把精力主要集中在如何将用户的选取范围转换成为W3C范围或者微软的文档范围对象。什么是范围范围是
JavaScript CSS修改学习第一章 查找位置 offset在所有的浏览器里面元素的offsetTop和offsetLeft两个属性都是很有用的。他们会给出你元素相对于父元素的坐标位置。这段代码会向上查找offsetParent,