用js实现动态添加表格数据
1、在页面div中事先创建一个空白表格，可以根据需求而定。
2、表格创建好后，我们就可以写动态生成表格的关键代码了。我们写一个js方法供触发使用。
3、在<tb>标签中我们添加了<input>标签，主要是用来提供用户输入参数， 而全局变量num，主要是用来区分每一个添加的参数的id的唯一性而存在的。
4、获得表格中的数据。
5、拿到表格中的数据后，我们根据它值的形式把它转换成json格式的数据。
<tablewidth="600"border="1"cellspacing="0">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>职位</th>
<th>操作</th>
</tr>
</thead>
<tbodyid="tbMain"></tbody>
</table>
<scripttype="text/javascript">
//模拟一段JSON数据，实际要从数据库中读取
varper=[
{id:001,name:'张珊',job:'学生'},
{id:002,name:'李斯',job:'教师'},
{id:003,name:'王武',job:'经理'}
];
window.onload=function(){
vartbody=document.getElementById('tbMain');
for(vari=0;i<per.length;i++){//遍历一下json数据
vartrow=getDataRow(per[i]);//定义一个方法,返回tr数据
tbody.appendChild(trow);
}
}
functiongetDataRow(h){
varrow=document.createElement('tr');//创建行
varidCell=document.createElement('td');//创建第一列id
idCell.innerHTML=h.id;//填充数据
row.appendChild(idCell);//加入行，下面类似
varnameCell=document.createElement('td');//创建第二列name
nameCell.innerHTML=h.name;
row.appendChild(nameCell);
varjobCell=document.createElement('td');//创建第三列job
jobCell.innerHTML=h.job;
row.appendChild(jobCell);
//到这里，json中的数据已经添加到表格中，下面为每行末尾添加删除按钮
vardelCell=document.createElement('td');//创建第四列，操作列
row.appendChild(delCell);
varbtnDel=document.createElement('input');//创建一个input控件
btnDel.setAttribute('type','button');//type="button"
btnDel.setAttribute('value','删除');
//删除操作
btnDel.οnclick=function(){
if(confirm("确定删除这一行嘛？")){
//找到按钮所在行的节点，然后删掉这一行
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
//btnDel-td-tr-tbody-删除(tr)
//刷新网页还原。实际操作中，还要删除数据库中数据，实现真正删除
}
}
delCell.appendChild(btnDel);//把删除按钮加入td，别忘了
returnrow;//返回tr数据
}
</script>
扩展资料
js动态创建表格
vartab=document.createElement("table");
tab.border="1px";
document.body.appendChild(tab);
for(vari=0;i<3;i++){
vartr=document.createElement("tr");
for(varj=0;j<3;j++){
vartd=document.createElement("td");
td.innerHTML=Math.round(Math.random()*9);
tr.appendChild(td);
}
tab.appendChild(tr);
vardel=document.createElement("td");
del.innerHTML="删除";
tr.appendChild(del);
del.onclick=function(){
this.parentNode.remove();
}
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8>
<title>table</title>
<style>
table {
margin:auto;
width: 60%;
border: 1px solid black;
border-collapse: collapse;
}
table caption {
color: blue;
font: 34px consolas bold;
}
table th, table td {
border: 1px solid black;
text-align:center;
}
table th {
font: 20px consolas bold;
background-color: gray;
}
table tr:nth-child(n+2){
background-color: cyan;
}
table tr:nth-child(2n+2) {
background-color: red;
}
</style>
<script>
var data = [
{id: "001", fullname: "张三", sex: "男", score: [98,33,48]},
{id: "002", fullname: "李四", sex: "w", score: [11,22,33]},
{id: "003", fullname: "kyo", sex: "m", score: [22,33,55]},
{id: "004", fullname: "yamazaki", sex: "w", score: [99, 100, 80]}
];
var Student = function (id, fullname, sex, score)
{
this.id = id;
this.fullname = fullname;
this.sex = sex;
this.score = score;
}
var Score = function (chinese, math, english)
{
this.chinese = chinese;
this.math = math;
this.english = english;
}
var students = [];
for (var i = 0; i < data.length; i++)
{
var d = data[i];
var s = d["score"];
students.push(new Student (d["id"], d["fullname"], d["sex"], new Score(s[0], s[1], s[2])));
}
onload = function ()
{
var table = document.createElement("table");
var tbody = document.createElement("tbody");
table.appendChild(tbody);
var caption = table.createCaption();
caption.innerHTML = "学生成绩表";
var tr = tbody.insertRow (0);
var str = "学号,姓名,性别,语文,数学,英语".split(",");
for (var i = 0; i < str.length; i++)
{
var th = document.createElement("th");
th.innerHTML = str[i];
tr.appendChild (th);
}
for (var i = 0; i < students.length; i++)
{
var tr = tbody.insertRow (tbody.rows.length);
var obj = students[i];
for (var p in obj)
{
var op = obj[p];
if (p != "score")
{
var td = tr.insertCell (tr.cells.length);
td.innerHTML = op;
}
else
{
for (var p in op)
{
var td = tr.insertCell (tr.cells.length);
td.innerHTML = op[p];
}
}
}
}
document.body.appendChild(table);
}
</script>
<body>
</body>
</html>
自己做出来了，还是很感谢你啦
|
广告 您可能关注的内容 |
