JS学习代码，动态生成TABLE和DIV

<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>

posted on 2010-05-05 15:39 carekee 阅读(5061) 评论(0) 编辑收藏举报