新手求问!!!用JS创建Table进行添加.修改.删除！还没有做完，求高手解答..
1
悬赏园豆：20
[已解决问题]
解决于 2011-03-04 15:56
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
//定义一个班级对象
var classes;
//定义一个学生对象
function Student(_id, _name, _sex, _age) {
this.id = _id;
this.name = _name;
this.sex = _sex;
this.age = _age;
}
window.onload = function() {
tow_load();
}
function tow_load() {
classes = [
new Student(2, "Dangpei", "nan", 21),
new Student(3, "Bangying", "nv", 20),
new Student(1, "Ciyang", "nan", 21),
new Student(4, "Aing", "nv", 19)
];
//数组进行排序
//classes.sort();
//创建TABLE
createtable(classes);
}
//用DOM实现表格创建
function createtable(cls) {
var table = document.createElement("table");
table.setAttribute("id","t1");
table.setAttribute("border", "1");
document.getElementById("table1").appendChild(table);
//创建表格标题
var thead = table.insertRow(0); //第0行
var h1 = thead.insertCell(0); //第0列
h1.innerText = "编号";
var h2 = thead.insertCell(1);
h2.innerText = "姓名";
var h3 = thead.insertCell(2);
h3.innerText = "性别";
var h4 = thead.insertCell(3);
h4.innerText = "年龄";
h1.onclick = function() { SortStudent("id", cls); };
h2.onclick = function() { SortStudent("name", cls); };
thead.insertCell(4).innerText = "添加";
thead.insertCell(5).innerText = "修改";
thead.insertCell(6).innerText = "删除";
//读取内容信息
for (var i = 0; i < cls.length; i++) {
var r = table.insertRow(1);
r.insertCell(0).innerText = cls[i].id;
r.insertCell(1).innerText = cls[i].name;
r.insertCell(2).innerText = cls[i].sex;
r.insertCell(3).innerText = cls[i].age;
//创建添加按钮
var butadd = document.createElement("input");
butadd.setAttribute("type", "button");
butadd.setAttribute("id", "btnadd");
butadd.setAttribute("value", "添加");
butadd.onclick = function() { butAdd_click(this); }
var addCell = r.insertCell(4);
addCell.appendChild(butadd);
//创建修改按钮
var butupdate = document.createElement("input");
butupdate.setAttribute("type", "button");
butupdate.setAttribute("value", "修改");
var updateCell = r.insertCell(5);
updateCell.appendChild(butupdate);
butupdate.onclick = function() { butupdate_click(this); }
//创建删除按钮
var butDelete = document.createElement("input");
butDelete.setAttribute("type", "button");
butDelete.setAttribute("value", "删除");
var deleteCell = r.insertCell(6);
deleteCell.appendChild(butDelete);
butDelete.onclick = function() { butDelete_click(this); }
}
}
//type 排序的方式 cls:要排序的数组对象
function SortStudent(type,cls) {
if (type == "id")
cls.sort(SortById);
else {
cls.sort(SortByName);
}
//清空DIV
document.getElementById("table1").innerHTML = "";
//重新加载数组数据
createtable(cls);
}
//按编号进行排序
function SortById(a, b) {
return -(a.id-b.id);
}
//按姓名排序
function SortByName(a, b) {
if (a.name > b.name)
return -1;
else if (a.name < b.name)
return 1;
else
return 0;
}
//添加
function butAdd_click(butadd) {
//获取Table
var table = document.getElementById("t1");
//获取row
var row = table.insertRow(butadd.parentElement.parentElement.rowIndex);
var cl1 = row.insertCell(0);
var txtid = document.createElement("input");
txtid.setAttribute("type", "text");
txtid.setAttribute("id", "txtid");
txtid.setAttribute("value","ok");
cl1.appendChild(txtid);
var cl2 = row.insertCell(1);
var txtname = document.createElement("input");
txtname.setAttribute("type", "text");
txtname.setAttribute("id", "txtname");
txtname.setAttribute("value", "name");
cl2.appendChild(txtname);
var cl3 = row.insertCell(2);
var txtsex = document.createElement("input");
txtsex.setAttribute("type", "text");
txtsex.setAttribute("id", "txtsex");
txtsex.setAttribute("value", "sex");
cl3.appendChild(txtsex);
var cl4 = row.insertCell(3);
var txtage = document.createElement("input");
txtage.setAttribute("type", "text");
txtage.setAttribute("id", "txtage");
cl4.appendChild(txtage);
var clsave = row.insertCell(4);
var save = document.createElement("input");
save.setAttribute("type", "button");
save.setAttribute("value", "保存");
save.onclick = function() { save_click(this); }
clsave.appendChild(save);
var clcancel = row.insertCell(5);
var cancel = document.createElement("input");
cancel.setAttribute("type", "button");
cancel.setAttribute("value", "取消");
cancel.onclick = function() {cancel_click(this)};
clcancel.appendChild(cancel);
}
//添加保存
function save_click(save) {
//alert(save.value);
var id = document.getElementById("txtid").value;
var name = document.getElementById("txtname").value;
var sex = document.getElementById("txtsex").value;
var age = document.getElementById("txtage").value;
//清空DIV
document.getElementById("table1").innerHTML = "";
//重新加载数组数据
tow_load();
}
function cancel_click(cls) {
//清空DIV
document.getElementById("table1").innerHTML = "";
//重新加载数组数据
tow_load();
}
//修改
function butupdate_click(update) {
var table = document.getElementById("t1");
var row = table.insertRow(update.parentElement.parentElement.rowIndex);
alert(row);
}
//删除
function butDelete_click(butdelate) {
var table = document.getElementById("t1");
var row = butdelate.parentElement.parentElement.rowindex;
alert(row);
}
</script>
</head>
<body>
<div id="table1" align="center">
</div>
</body>
</html>
最佳答案
0
function deltr(trid) {
var row = document.getElementById("hid_name").value;
var tr = trid.parentNode.parentNode;
tr.parentNode.removeChild(tr);
}
删除table的某行
收获园豆：20