笔记4

最新推荐文章于 2024-05-15 15:36:52 发布

peswe

最新推荐文章于 2024-05-15 15:36:52 发布

阅读量83

点赞数

分类专栏：学习笔记文章标签： JavaScript IE Firefox HTML ViewUI

本文链接：https://blog.csdn.net/peswe/article/details/83360529

版权

学习笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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" οnclick="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" οnclick="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" οnclick="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添加之前存入；