javascript向tabale中动态添加数据
<table width="600" border="1" cellspacing="0">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>职位</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbMain"></tbody>
</table>
<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>
最新文章
- FastCgi与PHP-fpm之间的关系
- 如何利用php array_multisort函数 对数据库排序
- 有关RDS上只读实例延时分析-同适用于自建MySQL主从延时分析判断
- pg_rewind 介绍
- hadoop 入门实例【转】
- os.system和os.popen
- javaScript 设计模式系列之二:适配器模式
- bzoj1433
- 深入理解Java虚拟机02--Java内存区域与内存溢出异常
- day40 mysql数据类型
- 关闭浏览器时提示的javascript事件
- SQL Server如何更改系统用户dbo的所属账号
- python - 自定制property/property的延时计算
- laravel5.4中验证与错误提示设置
- GDB &;&; QString
- js this详解,事件的三种绑定方式
- Java IO详解(三)------字节输入输出流
- C# JAVA 记录代码运行时间
- android热门消息推送横向测评![转]
- 初识Java ThreadLocal
热门文章
- windows下搭建nrf52832nordic_ble_sniffer_3.0+wireshark抓包环境
- vue获取不到页面图片实际宽高
- (0524) rbf 格式 (intel)
- linux安装Elasticsearch的单节点
- 梦想云图Node.JS服务 (网页CAD,在线CAD )
- TIDB-DM数据迁移第三部(集群管理)
- 【uni-app】第2节HBuilderX未检测到手机问题(今天终于找到解决办法了,亲测可以)
- VS编译运行报错:找不到ucrtbased.dll文件
- 安装git-lfs
- AES可以加密成