JavaScript如何动态删除行。 20
动态添加表格。然后每行的最后都自动生成一个删除按钮。点击即可删除那一行的数据。不能使用jQuery...
动态添加表格。然后每行的最后都自动生成一个删除按钮。点击即可删除那一行的数据。
不能使用jQuery 展开
不能使用jQuery 展开
展开全部
<!DOCTYPE html>
<html>
<head>
<title>JavaScript如何动态删除行。</title>
<meta charset="UTF-8" />
<script>
/*
Table表格类
2018年11月11日18:28:26
*/
function Table(father, rows, noHead){
//初始化 1.父元素（必须）
this.init = function(){
this.father = father ? father : document.body;
this.rows = [];
this.noHead = false;
this.box = document.createElement('table');
this.box.border = '1';
this.father.appendChild(this.box);
this.create(rows, noHead);
}
//创建表格 1.表格（二维数组） 2.不带表头（逻辑型，默认带表头）
this.create = function(rows, noHead){
this.rows = rows ? rows : [];
this.noHead = noHead ? true : false;
this.render();
}
//渲染表格
this.render = function(){
this.box.innerHTML = '';
var tr, td, row,
rows = this.rows,
noHead = false,
org = null;
for(rowIndex in rows){
row = rows[rowIndex].slice();
tr = document.createElement('tr');
noHead = (rowIndex == 0 && this.noHead == false);
if(noHead){
org = '操作';
}else{
org = document.createElement('a');
org.href = 'javascript:;';
org.innerHTML = '删除';
org.onclick = (function(o, rowIndex){
return function(){
o.delete(rowIndex);
}
})(this, rowIndex);
}
row.push(org);
for(colIndex in row){
td = document.createElement( noHead ? 'th' : 'td' );
if(typeof row[colIndex] == 'string'){
td.innerHTML = row[colIndex];
}else{
td.appendChild(row[colIndex]);
}
tr.appendChild(td);
}
this.box.appendChild(tr);
}
}
//删除行
this.delete = function(index){
this.rows.splice(index, 1);
this.render();
}
this.init();
}
//以下是使用实例
var table;
window.onload = function(){
table = new Table(
document.getElementById('main'),
[
['学号', '姓名', 'C语言', '动态脚本', '总分'],
['1', '曹操', '8', '9', '17'],
['2', '袁绍', '2', '3', '5'],
['3', '刘备', '6', '3', '9']
]
);
}
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
