1,The old way
var a = document.createElement('a');
a.setAttribute('class', 'foo');
a.setAttribute('href', '/foo.html');
a.appendChild(document.createTextNode("Next page"));
The new way
var a = new Element('a', { 'class': 'foo', href: '/foo.html' }).update("Next page");
1、将原来用table显示选择菜单改为用ul和li来显示
用table来显示的好处是：样式容易控制；缺点是：菜单中间空白段的长度不容易控制；
用ul的好处是：格式简单；缺点是：样式不容易控制；
2、完成了一直想实现的添加和删除email地址模块
以前用传统的javascript试过，其原理是：先建一个表格，然后在表格中利用javascript添加行或删除行及html代码，从而实现添加和删除email地址；具体代码如下：
<script language="javascript">
function addRow()
{
Otable = document.getElementById("tb1");
Otr = Otable.insertRow(0);
Otr.id = "tr1"
Otr.insertCell(0).innerHTML = '<input type="text" name="pname" size="20"><input type="button" value="cancle" onclick="return delRow(this );">'
return false;
}
function delRow(obj)
{
if(navigator.userAgent.indexOf("MSIE")>0)
obj.parentElement.parentElement.removeNode(true);
else
obj.parentNode.parentNode.removeChild("tr1");
return false;
}
</script>
<body>
<form name="test">
<table id="tb1">
<tr>
<td>
</td>
</tr>
</table>
<input type="button" value="addRow" onclick="addRow();" />
<input type="submit" value="submit" />
</form>
</body>
代码比较复杂，更重要的是，以上代码在ie中是可以实现添加和删除的，但在firefox中却有问题，只能添加，不能删除；
曾听领导说有更好的方法，于是便向领导询问，果然有更好的方法，示例代码如下：
<script language="javascript">
function addEmail()
{
var n = $$(".input").length;
var div = new Element('div',{'id':'div'+(n+1),'style':'margin:5px;'});
var input = new Element('input', { 'type': 'text', 'class': 'input','id':'email'+n, 'name':'email'+n,'size':'20' });
var button = new Element('input', { 'type': 'button','style':'margin-left:5px;', 'class': 'button', 'id':'btn'+n ,'value':'关闭','onclick':'delRow('+n+');'});
$('div'+n).insert(input);
$('div'+n).insert(button);
$('test').insert(div);
}
function delEmail(n)
{
$('email'+n).remove();
$('btn'+n).remove();
}
</script>
<form id="test">
<div style="margin:5px;" id="div0"><input type="text" name="email0" class="input" size="20"></div>
<div style="margin:5px;" id="div1"></div>
</form>
<input style="margin-left:5px;" type="button" value="add" class="button" onclick="addRow();">
代码较前者简单，但其中也是有许多技巧：
var div = new Element('div',{'id':'div'+(n+1),'style':'margin:5px;'});
以上代码标识，新建一个div标签，其生成的html代码为：
<div id="divn" sytle="margin:5px;"></div>
$('div'+n).insert(input);表示在id为“divn”的div标签中插入内容为input的html代码；
在方法二的代码的form表单中，那个空的div——也就是id="div1"的div是不可缺少的，那是由于实现input标签在不同行的效果，故将input标签的内容放于div中，所以div必须在input添加之前存入；
var a = document.createElement('a');
a.setAttribute('class', 'foo');
a.setAttribute('href', '/foo.html');
a.appendChild(document.createTextNode("Next page"));
The new way
var a = new Element('a', { 'class': 'foo', href: '/foo.html' }).update("Next page");
1、将原来用table显示选择菜单改为用ul和li来显示
用table来显示的好处是：样式容易控制；缺点是：菜单中间空白段的长度不容易控制；
用ul的好处是：格式简单；缺点是：样式不容易控制；
2、完成了一直想实现的添加和删除email地址模块
以前用传统的javascript试过，其原理是：先建一个表格，然后在表格中利用javascript添加行或删除行及html代码，从而实现添加和删除email地址；具体代码如下：
<script language="javascript">
function addRow()
{
Otable = document.getElementById("tb1");
Otr = Otable.insertRow(0);
Otr.id = "tr1"
Otr.insertCell(0).innerHTML = '<input type="text" name="pname" size="20"><input type="button" value="cancle" onclick="return delRow(this );">'
return false;
}
function delRow(obj)
{
if(navigator.userAgent.indexOf("MSIE")>0)
obj.parentElement.parentElement.removeNode(true);
else
obj.parentNode.parentNode.removeChild("tr1");
return false;
}
</script>
<body>
<form name="test">
<table id="tb1">
<tr>
<td>
</td>
</tr>
</table>
<input type="button" value="addRow" onclick="addRow();" />
<input type="submit" value="submit" />
</form>
</body>
代码比较复杂，更重要的是，以上代码在ie中是可以实现添加和删除的，但在firefox中却有问题，只能添加，不能删除；
曾听领导说有更好的方法，于是便向领导询问，果然有更好的方法，示例代码如下：
<script language="javascript">
function addEmail()
{
var n = $$(".input").length;
var div = new Element('div',{'id':'div'+(n+1),'style':'margin:5px;'});
var input = new Element('input', { 'type': 'text', 'class': 'input','id':'email'+n, 'name':'email'+n,'size':'20' });
var button = new Element('input', { 'type': 'button','style':'margin-left:5px;', 'class': 'button', 'id':'btn'+n ,'value':'关闭','onclick':'delRow('+n+');'});
$('div'+n).insert(input);
$('div'+n).insert(button);
$('test').insert(div);
}
function delEmail(n)
{
$('email'+n).remove();
$('btn'+n).remove();
}
</script>
<form id="test">
<div style="margin:5px;" id="div0"><input type="text" name="email0" class="input" size="20"></div>
<div style="margin:5px;" id="div1"></div>
</form>
<input style="margin-left:5px;" type="button" value="add" class="button" onclick="addRow();">
代码较前者简单，但其中也是有许多技巧：
var div = new Element('div',{'id':'div'+(n+1),'style':'margin:5px;'});
以上代码标识，新建一个div标签，其生成的html代码为：
<div id="divn" sytle="margin:5px;"></div>
$('div'+n).insert(input);表示在id为“divn”的div标签中插入内容为input的html代码；
在方法二的代码的form表单中，那个空的div——也就是id="div1"的div是不可缺少的，那是由于实现input标签在不同行的效果，故将input标签的内容放于div中，所以div必须在input添加之前存入；
分享到：
发表评论
-
08/1/8
2009-03-08 09:49 5421,sysdate oracle中表示今天的日期函数不是no ... -
08/1/7
2009-03-08 09:48 5251、<%=select table_name,attri ... -
mysql函数
2009-03-08 09:47 8741、coalesce(a,b,c):返回参数列表中第一个不为n ... -
笔记6
2009-03-08 09:46 6311、在模型中动态生成代码的函数module_eval 有时需 ... -
08/12/31
2009-03-08 09:45 657mysql中的一些用法： 1、user()：列出数据库的用户名 ... -
08/12/30
2009-03-08 09:44 804一、date_select(object_name,metho ... -
08/12/29
2009-03-08 09:43 705escape(), encodeURI()和encodeUR ... -
08/12/26
2009-03-08 09:43 7271、Table1.find(:all,:conditions= ... -
08/12/25
2009-03-08 09:42 7642、camelize 功能与ruby中的capitalize有 ... -
08/12/24
2009-03-08 09:41 7151、在知识库系统中添加了上传和播放mp3功能。 2、对考勤系 ... -
08/12/22
2009-03-08 09:31 739由于在周末的时候在系统的“项目”模块中添加了“项目类别”模块 ... -
08/12/17
2009-03-08 09:30 720今天本打算利用javascript做一个系统的导航的，所以在网 ... -
08/12/5
2009-03-08 09:29 669今天将系统给老板看了，老板提了几点意见： 1、在各模块的列表中 ... -
08/11/10
2009-03-08 09:25 6171、实现了将数据库中的记录按不同的分页条件进行分页； 以往都是 ... -
笔记5
2009-03-08 09:23 4521、解决了昨天完成的搜索记录中还存在的问题： 现象：搜索条件中 ... -
笔记3
2009-03-08 09:16 614今天主要看了下sql语句在oracle中的实现 一、orac ... -
笔记2
2009-03-08 09:12 673昨天，已经弄好了项目的显示和添加模块，今天继续完成了项目职能的 ... -
笔记1
2009-03-08 09:08 562今天做CRM系统中的用户 ...
相关推荐
为知笔记4-1
Cadence学习笔记4PCB板设计.pdf
linux笔记4.one
上课笔记4.txt
尚硅谷电商项目尚品汇笔记4
Cadence学习笔记4PCB板设计(20220104205641).pdf
java学习笔记4（java多线程）java学习笔记4（java多线程）
python笔记4.列表操作，各种操作
Uml和模式应用 配套视频笔记4(1) 非常经典 帮助您迅速整理此书框架
SSH学习笔记 SSH学习笔记 SSH学习笔记 SSH学习笔记 SSH学习笔记 SSH学习笔记 SSH学习笔记 SSH学习笔记 SSH学习笔记 SSH学习笔记 SSH学习笔记 SSH学习笔记 SSH学习笔记
良葛格Java_JDK_5.0学习笔记4
我的SAP BW成长学习笔记 之 4 SAP BW
最近一年的C++学习笔记，分享出来，文件已加密压缩，下载前请提前联系我！
S7-200 Smart入门笔记4——全局变量和局部变量 S7-200 Smart入门笔记5——子程序 S7-200 Smart入门笔记6——中断1 S7-200 Smart入门笔记7——中断2 S7-200 Smart入门笔记8——电机控制子程序调用1-OUT S7-200 Smart...
公开课笔记4——牛顿方法、指数分布族、广义线性模型 公开课笔记5——生成学习、高斯判别、朴素贝叶斯 公开课笔记6——NB多项式模型、神经网络、SVM初步 公开课笔记7——最优间隔分类、原始/对偶问题、SVM对偶 公开...
4-Struts入门笔记 005_Struts+DAO登陆 6-Struts标签-BEAN标签笔记 7-Struts标签 -LOGIC标签笔记 8-Struts标签- HTML标签笔记 9-Struts高级部分(1)(解决重复提交、上传组件)笔记 10-Struts高级部分（2）（常用Action...
4-Struts入门笔记 005_Struts+DAO登陆 6-Struts标签-BEAN标签笔记 7-Struts标签 -LOGIC标签笔记 8-Struts标签- HTML标签笔记 9-Struts高级部分(1)(解决重复提交、上传组件)笔记 10-Struts高级部分（2）（常用Action...
第四次笔记了 大家可以系统的看看我的笔记内容 有没有对大家有帮助的
4-Struts入门笔记 005_Struts+DAO登陆 6-Struts标签-BEAN标签笔记 7-Struts标签 -LOGIC标签笔记 8-Struts标签- HTML标签笔记 9-Struts高级部分(1)(解决重复提交、上传组件)笔记 10-Struts高级部分（2）（常用Action...