javascript操作向表格中动态加载数据
作者:mo-2016 时间:2024-04-27 15:21:09
本文实例为大家分享了javascript实现向表格中动态加载数据的具体代码,供大家参考,具体内容如下
首先在HTML中编写表格信息
<table width="500px" border="1">
//表格头部信息
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>身份</th>
<th>操作</th>
</tr>
</thead>
//表格内容信息
<tbody id="tbBody"></tbody>
</table>
然后编写js代码
<!--script中的type默认为"text/javascript"-->
<script type="text/javascript">
//创建一个数组
var per=[
{id:'001',name:'张三',job:'学生'},
{id:'002',name:'张三',job:'学生'},
{id:'003',name:'张三',job:'学生'},
{id:'004',name:'张三',job:'学生'}
];
//打开窗口就执行
window.onload=function () {
var tbody=document.getElementById('tbBody');
for(var i=0;i<per.length;i++){
var trow=getDataRow(per[i]);
tbody.appendChild(trow)
}
}
//获取数据
function getDataRow(h) {
//创建行
var row=document.createElement('tr');
/*创建第一列id属性*/
//创建第一列id
var idCell=document.createElement('td');
//向id填充数据
idCell.innerText=h.id;
//加入行
row.appendChild(idCell);
/*创建第二列属性name 和上面类似*/
var nameCell=document.createElement('td');
nameCell.innerText=h.name;
row.appendChild(nameCell);
/*创建第三列属性job 和上面类似*/
var jobCell=document.createElement('td');
jobCell.innerText=h.job;
row.appendChild(jobCell);
//到这里,json中的数据已经添加到表格里面了,下面为每行末尾添加删除按钮
/*创建第四列属性 删除属性*/
var deleteCell=document.createElement('td');
//加入行
row.appendChild(deleteCell);
//创建一个删除按钮控件
var buttonCell=document.createElement('input');
//setAttribute()方法创建或改变某个新属性,如果指定属性已存在,则只设置该值
buttonCell.setAttribute('type','button');
buttonCell.setAttribute('value','删除');
//删除功能
buttonCell.onclick=function () {
if(confirm("确定删除这一行吗?")){
//找到按钮所在的行之后进行删除 parentNode节点查找
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
}
}
//吧删除按钮控件加入第四列属性 删除属性
deleteCell.appendChild(buttonCell);
//返回行的数据
return row;
}
</script>
下面是操作后的显示图
来源:https://blog.csdn.net/qq_40825627/article/details/84572979
标签:js,表格,加载数据
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Vue前端后端的交互方式 axios
2024-05-21 10:28:58
SQL2005查看死锁存储过程sp_who_lock
2024-01-12 20:34:13
在MySQL字段中使用逗号分隔符的方法分享
2024-01-17 23:34:19
GetPageSize和GetPageScroll:获取页面大小、窗口大小和滚动条位置
2008-12-27 22:30:00
pyx文件 生成pyd 文件用于 cython调用的实现
2022-09-17 13:54:32
静态页面实现文章点击数统计的js方法
2008-01-23 19:17:00
python 爬取吉首大学网站成绩单
2023-08-02 05:57:13
![](https://img.aspxhome.com/file/2023/6/61216_0s.png)
Flask框架各种常见装饰器示例
2023-08-25 01:07:45
![](https://img.aspxhome.com/file/2023/4/127874_0s.png)
pytorch sampler对数据进行采样的实现
2023-02-09 20:05:40
破解空间实现域名绑定到子目录方法
2010-03-14 11:29:00
Python NLP开发之实现聊天机器人
2021-12-21 18:04:48
![](https://img.aspxhome.com/file/2023/1/66851_0s.png)
Python 对输入的数字进行排序的方法
2022-11-10 13:11:36
js判断传入时间和当前时间大小实例(超简单)
2024-05-02 17:26:40
微软建议的ASP性能优化28条守则(7)
2005-05-30 16:02:00
使用Python的networkx绘制精美网络图教程
2022-10-31 06:52:47
![](https://img.aspxhome.com/file/2023/1/83911_0s.jpg)
mysql高级学习之索引的优劣势及规则使用
2024-01-13 16:21:33
Python换行与不换行的输出实例
2022-01-15 13:10:10
Mysql join连接查询的语法与示例
2024-01-15 07:34:48
python爱心表白 每天都是浪漫七夕!
2023-02-26 20:36:55
![](https://img.aspxhome.com/file/2023/4/114664_0s.jpg)
Python类中的魔法方法之 __slots__原理解析
2023-10-01 18:49:51