本文分享一个用js 写一个可变的表格的代码，希望对大家有帮助！
table.html
<html>
<head>
<title>js table</title>
<meta charset="utf-8">
<script src="js.js"></script>
</head>
<body>
<button onclick="jianbiao()">创建表格</button>
<button onclick="jianhang()">添加行</button>
</body>
</html>
js.js
/**************************************
任务：
1.创建table，并将table添加到body当中
2.向table中添加行tablerow
3.向tablerow中添加单元格tablecell
4.在tablecell中，添加innerhtml的内容，比如数字，文本，编辑框，按钮等
5.从table中删除一行
6.可视化编辑tablerow中的内容
***************************************/
function jianbiao() {
// body...
var mytable=document.createelement('table');
mytable.border='1';
mytable.id='mytable';
document.body.appendchild(mytable);
var row=mytable.insertrow(0);
var cell1=row.insertcell(0);
cell1.innerhtml=描述1;
var cell2=row.insertcell(1);
cell2.innerhtml=描述1;
var cell3=row.insertcell(2);
cell3.innerhtml=描述1;
var cell4=row.insertcell(3);
cell4.innerhtml=描述1;
}
function jianhang(){
var mytable=document.getelementbyid('mytable');
var rowcount=mytable.rows.length;
var row=mytable.insertrow(rowcount);
var cell1=row.insertcell(0);
cell1.innerhtml=这个单元格的坐标是(0,+ rowcount +);
var cell2=row.insertcell(1);
cell2.innerhtml=(1,+ rowcount +);
var cell3=row.insertcell(2);
cell3.innerhtml=<input type='text' />;
var cell4=row.insertcell(3);
cell4.innerhtml=<button onclick='gengxin(this.parentnode.parentnode.rowindex)'/>修改</button><button onclick='delet(this.parentnode.parentnode.rowindex)'>删除</button>;
}
function gengxin (argument) {
var mytable=document.getelementbyid('mytable');
var row=mytable.rows[argument];
var cell=row.cells[1];
cell.innerhtml=修改之后;
}
function delet (argument) {
var mytable=document.getelementbyid('mytable');
mytable.deleterow(argument);
}
以上就是分享一个用js 写一个可变的表格的代码的详细内容。