分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

jquery将json数据放入表格当中

发布时间:2023-09-06 02:24责任编辑:彭小芳关键词:jsjson

数据:

var datas = [{ ???????name:"淘宝", ???????url:"www.taobao.com", ???????type:"购物网站" ???},{ ???????name:"百度", ???????url:"www.baidu.com", ???????type:"搜索网站" ???},{ ???????name:"腾讯", ???????url:"www.qq.com", ???????type:"综合网站" ???}];

效果:

源码:

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>表格动态添加数据</title> ???<script src="jquery-3.3.1.js"></script></head><body><style> ???table{ ???????border-collapse: collapse; ???????border-spacing: 0; ???????border: 1px solid #c0c0c0; ???} ???th,td{ ???????border: 1px solid #d0d0d0; ???????color: #404060; ???????padding: 10px; ???} ???th{ ???????background-color: #0A7EC3; ???????font: bold 16px "微软雅黑"; ???????color: #fff; ???}</style><script type="text/javascript"> ???var datas = [{ ???????name:"淘宝", ???????url:"www.taobao.com", ???????type:"购物网站" ???},{ ???????name:"百度", ???????url:"www.baidu.com", ???????type:"搜索网站" ???},{ ???????name:"腾讯", ???????url:"www.qq.com", ???????type:"综合网站" ???}]; ???$(function () { ???????var tableHtml = ""; ???????for(var i in datas){ ???????????tableHtml += "<tr>"; ???????????tableHtml += ???"<td>"+ datas[i].name +"</td>"; ???????????tableHtml += ???"<td>"+ datas[i].url +"</td>"; ???????????tableHtml += ???"<td>"+ datas[i].type +"</td>"; ???????????tableHtml += "</tr>"; ???????} ???????$("#aj_data").html(tableHtml); ???})</script><table> ???<thead> ???????<tr> ???????????<th width="">标题</th> ???????????<th>url</th> ???????????<th>备注</th> ???????</tr> ???</thead> ???<tbody id="aj_data"> ???</tbody></table></body></html>

jquery将json数据放入表格当中

原文地址:https://www.cnblogs.com/alex-xxc/p/10025875.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved