未加星标

JavaScript中动态向表格添加数据

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

利用javascript ,动态向表格中添加数据,其实方法很简单的,下面给大家分享下实现方法

1. 首先先写出表格的表头和主干部分

<table width="600" border="1" cellspacing="0">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>职位</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbMain"></tbody>
</table>

2. 接下来就是网表格里面添加数据,这里用的是原生javascript

<script type="text/javascript">
//模拟一段JSON数据,实际要从数据库中读取
var per = [
{id:001,name:'张珊',job:'学生'},
{id:002,name:'李斯',job:'教师'},
{id:003,name:'王武',job:'经理'}
];
window.onload = function(){
var tbody = document.getElementById('tbMain');
for(var i = 0;i < per.length; i++){ //遍历一下json数据
var trow = getDataRow(per[i]); //定义一个方法,返回tr数据
tbody.appendChild(trow);
}
}
function getDataRow(h){
var row = document.createElement('tr'); //创建行
var idCell = document.createElement('td'); //创建第一列id
idCell.innerHTML = h.id; //填充数据
row.appendChild(idCell); //加入行 ,下面类似
var nameCell = document.createElement('td');//创建第二列name
nameCell.innerHTML = h.name;
row.appendChild(nameCell);
var jobCell = document.createElement('td');//创建第三列job
jobCell.innerHTML = h.job;
row.appendChild(jobCell);
//到这里,json中的数据已经添加到表格中,下面为每行末尾添加删除按钮
var delCell = document.createElement('td');//创建第四列,操作列
row.appendChild(delCell);
var btnDel = document.createElement('input'); //创建一个input控件
btnDel.setAttribute('type','button'); //type="button"
btnDel.setAttribute('value','删除');
//删除操作
btnDel.onclick=function(){
if(confirm("确定删除这一行嘛?")){
//找到按钮所在行的节点,然后删掉这一行
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
//btnDel - td - tr - tbody - 删除(tr)
//刷新网页还原。实际操作中,还要删除数据库中数据,实现真正删除
}
}
delCell.appendChild(btnDel); //把删除按钮加入td,别忘了
return row; //返回tr数据
}
</script>

3. 网页测试

JavaScript中动态向表格添加数据

显示成功,点击删除按钮,并确定即可删除这一行

删除第二行,可以!
JavaScript中动态向表格添加数据

以上所述是小编给大家介绍的JavaScript中动态向表格添加数据,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: lt,gt,var,th,tr,document,删除,id,appendChild,td,btnDel,createElement,row,parentNode,tbody
分页:12
转载请注明
本文标题:JavaScript中动态向表格添加数据
本站链接:http://www.codesec.net/view/530175.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(53)