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添加之前存入；
筆記4
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章