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

JavaScript实现动态表格的创建

2017-08-03 22:56 218 查看
全部实现表格的动态创建。

要求：表格表头内容为”编号，学号，姓名，年龄，手机号，操作”，

操作列包括两个按钮【添加】【删除】可以动态为这个表格添加行，也可以删除行。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现动态表格的设计</title>
</head>
<body>

<button id="button1" onclick="addRows()">添加</button>
<button id="button2" onclick="deleteRows()">删除</button>

<script type="text/javascript">

//1.创建表格
var table=document.createElement("table");
table.border="1";
table.width="800px";
//2.创建tbody
var tb=document.createElement("tbody");
table.appendChild(tb);
//3.创建表头
var tr1=document.createElement("tr");
tb.appendChild(tr1);
var th1=document.createElement("th");
th1.appendChild(document.createTextNode("编号"));
tr1.appendChild(th1);

var th2=document.createElement("th");
th2.appendChild(document.createTextNode("学号"));
tr1.appendChild(th2);

var th3=document.createElement("th");
th3.appendChild(document.createTextNode("姓名"));
tr1.appendChild(th3);

var th4=document.createElement("th");
th4.appendChild(document.createTextNode("年龄"));
tr1.appendChild(th4);

var th5=document.createElement("th");
th5.appendChild(document.createTextNode("手机号"));
tr1.appendChild(th5);

var th6=document.createElement("th");
th6.appendChild(document.createTextNode("操作"));
tr1.appendChild(th6);

tb.insertRow(1);
tb.rows[1].insertCell(0);
tb.rows[1].cells[0].appendChild(document.createTextNode("1,1"));
tb.rows[1].insertCell(1);
tb.rows[1].cells[1].appendChild(document.createTextNode("1,1"));
tb.rows[1].insertCell(2);
tb.rows[1].cells[2].appendChild(document.createTextNode("1,1"));
tb.rows[1].insertCell(3);
tb.rows[1].cells[3].appendChild(document.createTextNode("1,1"));
tb.rows[1].insertCell(4);
tb.rows[1].cells[4].appendChild(document.createTextNode("1,1"));
tb.rows[1].insertCell(5);
tb.rows[1].cells[5].appendChild(document.getElementById("button1"));
tb.rows[1].cells[5].appendChild(document.getElementById("button2"));

document.body.appendChild(table);

function addRows(){
tb.insertRow(1);
tb.rows[1].insertCell(0).appendChild(document.createTextNode("new cell"));
tb.rows[1].insertCell(1).appendChild(document.createTextNode("new cell"));
tb.rows[1].insertCell(2).appendChild(document.createTextNode("new cell"));
tb.rows[1].insertCell(3).appendChild(document.createTextNode("new cell"));
tb.rows[1].insertCell(4).appendChild(document.createTextNode("new cell"));
tb.rows[1].insertCell(5).appendChild(document.createTextNode("new cell"));
}
function deleteRows(){
tb.deleteRow(1);
}

</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript
相关文章推荐
新的分享
章节导航