<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } #tab{ margin: 100px auto; /*width: 600px;*/ border-collapse: collapse; } #tab th{ height: 50px; font-size: 20px; text-align: center; } #tab td{ height: 50px; text-align: center; } </style> </head> <body> <table id="tab" border="1"> <tr><th colspan="4">Person Message</th></tr> <tr><td>姓名</td><td>年龄</td><td>职业</td><td>简介</td></tr> </table> <script type="text/javascript"> // 用表格展示,obj里的内容,选项卡 var tab = document.getElementById('tab') var tr = document.querySelectorAll('tr'); var td = document.querySelectorAll('td'); // obj是插入数据,可以简短 var obj = [ { 'name': '周杰伦', // 名称 'age': '28', // 年龄 'profession': '歌手', // 职业 // 简介 'introduce': '周杰伦(Jay Chou),1979年1月18日出生于台湾省新北市,中国台湾流行乐男歌手、音乐人、演员、导演、编剧、监制、商人。' }, { 'name': '布冯', 'age': '40', 'profession': '足球运动员', 'introduce': '吉安路易吉·布冯(Gianluigi Buffon),1978年1月28日出生于意大利卡拉拉,意大利职业足球运动员,司职门将,效力于意甲尤文图斯足球俱乐部。' }, { 'name': '加内特', 'age': '42', 'profession': '篮球运动员', 'introduce': '凯文·加内特(Kevin Garnett),1976年5月19日出生在美国南卡罗来纳,前美国职业篮球运动员,司职大前锋/中锋,绰号狼王(森林狼时期)、KG(名字缩写)、The BIG TICKET、Da Kid。' }, { 'name': '李青', 'age': '28', 'profession': '打野', 'introduce': '李青是一个近战战士型英雄,拥有很高的机动性和爆发力,单挑和小规模团战能力很强,同时李青也是非常优秀的打野英雄,非常擅长野区的遭遇战和Gank,是非常致命的英雄人物。' }, { 'name': '巫妖王', 'age': '1000', 'profession': 'boss', 'introduce': '巫妖王是魔兽世界设定中的一个职位,天灾军团的统领,并非专指某人,至今为止共有三代,初代耐奥祖、二代阿尔萨斯、三代伯瓦尔。' } ]; insertObj(obj); function insertObj(obj){ // 获取文本内容的条数 for(var i=0;i<obj.length;i++){ // 把每条内容的每个属性值加到新数组 var obj_val = Object.values(obj[i]); // 每条内容需要一行 var _tr = document.createElement('tr'); // 对每条内容的每个属性值进行循环 for (var j=0;j<obj_val.length;j++) { // 定义td装载属性值 var _td= document.createElement('td'); // 把第几个属性值加到第几个td _td.innerHTML = obj_val[j]; // 把td加到tr _tr.appendChild(_td); } // 把tr加到table tab.appendChild(_tr) } } </script> </body> </html>
js插入数据操作
猜你喜欢
转载自blog.csdn.net/qq_36245035/article/details/80631258
今日推荐
周排行