<html>
<head><title>aa</title>
<script src="jquery.js"></script>
<script>
var abc={'class': 'newDivClass', id: 'newDiv', name: 'newDivName'};
alert(abc["class"]);
function aaa()//传统的方式来动态添加一个DIV
{
var newElement = document.createElement('div');
var newText = document.createTextNode('这是新建立 div 中的文字。');
document.getElementById("mydiv").appendChild(newElement); //漏了这一句，否则行不通
newElement.id = 'newDiv';
newElement.className = 'newDivClass';
newElement.setAttribute('name ','newDivName');
newElement.style.width = '300px';
newElement.style.height = '200px';
newElement.style.margin = '0 auto';
newElement.style.border = '1px solid #DDD';
newElement.appendChild(newText);
}
//$(function(){alert("asdf");});
var i=0;
function clickme()//动态添加TABLE内容
{
i++;
var tbl=document.getElementById("tb");
var row=tbl.insertRow(tbl.rows.length);
var cell1=row.insertCell(row.cells.length);
var cell2=row.insertCell(row.cells.length);
var cell3=row.insertCell(row.cells.length);
var cell4=row.insertCell(row.cells.length);
cell1.innerHTML="a"+i;
cell2.innerHTML="b"+i;
cell3.innerHTML="c"+i;
cell4.innerHTML="<a href='javascript:deleteRow("+(tbl.rows.length-1)+")'>delete</a>";
cell1.setAttribute("width","150px");
cell2.setAttribute("width","150px");
cell3.setAttribute("width","150px");
cell4.setAttribute("width","150px");
//row.style.setAttribute("backgroundColor","#e0e0e0");
row.style["backgroundColor"]="#e0e0e0"; //第二种设置样式的方法
tbl.style.setAttribute("backgroundColor","olive");
tbl.setAttribute("width","500px");
//alert(row.style["backgroundColor"]);
}
function leo()//重定下标
{
var tbl=document.getElementById("tb");
for(var k=0;k<tbl.rows.length;k++)
{
tbl.rows[k].cells[3].innerHTML="<a href='javascript:deleteRow("+k+")'>delete</a>";
}
}
function deleteRow(obj)//删除指定的行
{
var tbl=document.getElementById("tb");
tbl.deleteRow(obj);
leo();
}
function clickme2()//用古老的方式向层里添加内容
{
var my=document.getElementById("mydiv");
//alert(my);
my.innerHTML=$("#mydiv").html()+"<div style='border-bottom:1px solid purple'>zhaosheng</div>";
//my.appendChild("<div style='border:1px solid purple'>zhaosheng</div>");
}
var k=0;
function createSelect()//为SELECT、动态添加项
{
document.getElementById("sel").options[document.getElementById("sel").options.length] = new Option("optionName"+k,"optionValue"+k);
k++;
}
function change(obj)//select change function
{
alert(obj.value);
}
function common(type,attr,style,html)
{
var element=document.createElement(type);
document.body.appendChild(element);
for(var k in attr)
{
element.setAttribute(k,attr[k]);
}
for(var k in style)
{
element.style[k]=style[k];
}
element.appendChild(document.createTextNode(html));
}
function commontest()
{
var attr={"name":"myname","id":"myid"};
var style={"width":"500px","height":"400px","border":"1px solid purple"};
var html="this is my text";
common("div",attr,style,html);
}
</script>
</head>
<body>
<a href="javascript:commontest();">commontest</a>
<a href="javascript:aaa();">aaa</a>
<a href="javascript:clickme();">clickme</a>
<table id="tb">
<tr>
<td>id</td>
<td>name</td>
<td>age</td>
<td>operate</td>
</tr>
</table>
<a href="javascript:clickme2();">clickme2</a>
<div style="border:1px solid olive;padding:5px 0px 10px 3px" id="mydiv"></div>
<a href="javascript:createSelect();">createSelect</a>
<select id="sel" onchange="javascript:change(this);">
</select>
</body>
</html>
