1. 程式人生 > >建立表格及只建立一個元素的方法

建立表格及只建立一個元素的方法

<input type="button" value="點選" id="bt"/>
<div id="dv"></div>
<script src="commer.js"></script>
<script>
var arr=[
{name:"百度",href:"http://www.baidu.com"},
{name:"谷歌",href:"http://www.baidu.com"},
{name:"愛奇藝",href:"http://www.baidu.com"},
{name:"優酷",href:"http://www.baidu.com"},
{name:"騰訊",href:"http://www.baidu.com"}
];
//點選按鈕建立表格
ver("bt").onclick=function () {
//建立table加入到div中
var tableObj=document.createElement("table");
tableObj.border="1";
tableObj.cellPadding="0";
tableObj.cellSpacing="0";
ver("dv").appendChild(tableObj);
//建立行,把行加入到table中
for(var i=0;i<arr.length;i++){
var dt=arr[i];//每個物件
var trObj=document.createElement("tr");
tableObj.appendChild(trObj);
//建立第一個列,然後加入到行中
var tb1=document.createElement("td");
tb1.innerText=dt.name;
tableObj.appendChild(tb1);
//建立第二個列
var tb2=document.createElement("td");
tb2.innerHTML="<a href="+dt.href+">"+dt.name+"</a>";
tableObj.appendChild(tb2);
}
};

</script>





<input type="button" value="點選" id="btn"/>
<div id="dv"></div>
<script src="commer.js"></script>
<script>
//有則刪除,無則建立

//先判斷有沒有,有就刪除,沒有就建立,建立多次,但還是顯示一個
// ver("btn").onclick=function () {
// //判斷這個div中有沒有按鈕,有就刪除
// //判斷這個按鈕的子元素是否存在
// if(ver("btn2")){
// ver("dv").removeChild(ver("btn2"));
// }
// var Obj=document.createElement("input");
// Obj.type="button";
// Obj.value="按鈕";
// Obj.id="btn2";
// ver("dv").appendChild(Obj);
// };

//只建立一次
ver("btn").onclick=function () {
//判斷這個div中有沒有按鈕,有就刪除
//判斷這個按鈕的子元素是否存在
if(!ver("btn2")){
var Obj=document.createElement("input");
Obj.type="button";
Obj.value="按鈕";
Obj.id="btn2";
ver("dv").appendChild(Obj);
}
};


</script>