您的位置:首页 > Web前端 > JavaScript

使用javascript DOM实现动态实现删除表格

2008-08-20 22:14 941 查看
学习java script也有好几天了,今天看了一下DOM这一章,试着写了一下关于动态表格建立的一个小程序。部分功能没有实现

先上传上来再说吧,呵呵

下面是原代码

<style>
.table{
font-size:12pt;
border:1px solid red;
width:500px;
height:400px;
text-align:center;
border-collapse:collapse;
}
.td{
border:1px solid red;
}
</style>
<script>
window.onload=dom;
function dom(){
var btn = document.createElement("input");
btn.type="button";
btn.value="增加";
btn.onclick=function(){
trObj = document.createElement("tr");

}
var bodyObj = document.getElementsByTagName("body")[0];
bodyObj.appendChild(btn);

//-------------------------------创建表格-------------------------------------------------------
var tableObj = document.createElement("table");
var tbodyObj = document.createElement("tbody");

trObj = document.createElement("tr");
var tdObj = document.createElement("td");
var ckObj = document.createElement("input");
ckObj.type="checkbox";
tdObj.appendChild(ckObj);
trObj.appendChild(tdObj);
for(var j=0;j<5;j++){
var tdObj = document.createElement("td");
tdObj.className="td";
var textObj = document.createTextNode("j"+j);
tdObj.appendChild(textObj);
trObj.appendChild(tdObj);
}
tbodyObj.appendChild(trObj);
for(var i=0;i<5;i++){
var trObj = document.createElement("tr");
tableObj.className="table";
ckObj = document.createElement("input");
ckObj.type="checkbox";
ckObj.id="item";
ckObj.name="item";
var tdObj = document.createElement("td");
tdObj.className = "td";
tdObj.appendChild(ckObj);
trObj.appendChild(tdObj);
for(var j=0;j<4;j++){
var tdObj = document.createElement("td");
var textObj = document.createTextNode("hello"+i+j);
tdObj.className = "td";
tdObj.appendChild(textObj);
trObj.appendChild(tdObj);
}
//------------添加鼠标移动事件-----------------
trObj.onmouseover=function(){
this.style.backgroundColor="#333333";
};
trObj.onmouseout=function(){
this.style.backgroundColor="";
};
//---------------------------------------------

//-------------增加删除按钮-------------------------------
tdObj = document.createElement("td");
delBtn = document.createElement("input");
delBtn.type="button";
delBtn.value="删除";
tdObj.className = "td";
delBtn.onclick=function(){
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
};
tdObj.appendChild(delBtn);
//---------------------------------------------------------
trObj.appendChild(tdObj);
tbodyObj.appendChild(trObj);
}
tableObj.appendChild(tbodyObj);
bodyObj.appendChild(tableObj);

//----------------------------------------------------------------------
}
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: