json 파일을 테이블에 표시하는 방법 [구현코드]

집

웹 프론트엔드

JS 튜토리얼

json 파일을 테이블에 표시하는 방법 [구현코드]_javascript 기술

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 am 09:00 AM

시트

<body>
//首先得把架子搭起来
<table id = "tb" border="1">
 <tr></tr>
 <tr></tr>
</table>
//js部分
<script>
//简单的json内容
var json = {"姓名":"张三","年龄":"26","性别":"男"};
//获取tr
var tr = document.getElementsByTagName('tr');
//tr1和tr2下面会用到，但是要先声明，给一个空值
var tr1 = '';
var tr2 = '';
//用for in来进行遍历，k是键，json[k]是值
for(var k in json){
 tr1+='<th>'+k+'</th>';
 tr2+='<td>'+json[k]+'</td>';
}
//tr1里放的是键，也就是姓名，年龄，性别，然后把这些信息放到第一个tr里
tr[0].innerHTML = tr1;
//tr2里放的是值，也就是张三，26，男，把这些信息放到第二个tr里
tr[1].innerHTML = tr2;
</script>

JSON 콘텐츠를 테이블에 동적으로 넣는 방법에 대해 생각해 본 적이 있나요? 물론 면접 때 질문은 ajax를 어떻게 사용하느냐는 질문을 받기도 합니다. 하지만 여기서는 간단한 데모를 작성하고 기존 json을 테이블에 넣을 것입니다. 이 데모를 매번 테이블에 배치했지만 이렇게 보면 매우 이상하게 보일 수 있습니다

이름

장산

나이

성별

남성

이럴 수도 있겠네요

이름

나이

성별

장산

남성

하지만 내가 원하는 건 바로 이것이다

이름 나이 성별

장산 26남

몇번의 실험 끝에 HTML 스켈레톤 구조를 조정해야 한다는 것을 알았습니다. 처음에 테이블 태그만 넣는 것은 불가능합니다. 마지막으로 js를 사용하여 채워야 합니다. 원하는 결과를 얻으려면 두 개의 tr 태그를 사용하세요

위의 json 파일을 테이블에 표시하는 방법[구현 코드]에 대한 글은 모두 에디터가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. Script Home에 많은 지원 부탁드립니다.

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

如何使用 JavaScript 实现表格列宽拖拽调整功能？Oct 21, 2023 am 08:14 AM

如何使用JavaScript实现表格列宽拖拽调整功能？随着Web技术的发展，越来越多的数据以表格的形式展示在网页上。然而，有时候表格的列宽并不能满足我们的需求，可能会出现内容溢出或者宽度不足的情况。为了解决这个问题，我们可以使用JavaScript实现表格的列宽拖拽调整功能，使用户可以根据需求自由调整列宽。实现表格列宽拖拽调整功能，需要以下三个主

css怎么去掉表格重复的边框Sep 29, 2021 pm 06:05 PM

在css中，可以使用border-collapse属性来去掉表格中重复的边框，该属性可以设置表格边框是折叠为单一边框还是分开的，只需要将值设置为collapse即可把重叠的边框合并在一起，成为一个边框，实现单线边框的效果。

表格有一条虚线外打印不到怎么办Mar 28, 2023 am 11:38 AM

表格有一条虚线外打印不到的解决办法：1、打开excel文件，在打开的页面中点击“打印”；2、在预览页找到“无缩放”，选择调整为一页；3、选择打印机打印文档即可。

Vue中如何实现表格数据的导出和导入Oct 15, 2023 am 08:30 AM

Vue中如何实现表格数据的导出和导入，需要具体代码示例在使用Vue开发的Web项目中，经常会遇到需要将表格数据导出为Excel或导入Excel文件的需求。本文将介绍如何使用Vue来实现表格数据的导出和导入功能，并提供具体的代码示例。一、表格数据的导出安装依赖首先，我们需要安装一些依赖，用于导出Excel文件。在Vue项目中的命令行中运行以下命令：npmin

使用JavaScript实现表格筛选功能Aug 10, 2023 pm 09:51 PM

使用JavaScript实现表格筛选功能随着互联网技术的不断发展，表格成为了网页中常见的展示数据的方式。然而，当数据量庞大时，用户往往会面临找到特定数据的困难。因此，为表格添加筛选功能，让用户可以快速找到所需的数据，成为了很多网页设计的需求。本文将介绍如何使用JavaScript实现表格筛选功能。首先，我们需要有一份表格数据。下面是一个简单的例子：<t

如何使用 JavaScript 实现表格分页功能？Oct 20, 2023 pm 06:19 PM

如何使用JavaScript实现表格分页功能？随着互联网的发展，越来越多的网站都会使用表格来展示数据。在一些数据量较大的情况下，需要将数据进行分页展示，以提升用户体验。本文将介绍如何使用JavaScript实现表格分页功能，并提供具体的代码示例。一、HTML结构首先，我们需要准备一个HTML结构来承载表格和分页按钮。我们可以使用<tab

使用JavaScript实现表格数据的分页显示Jun 16, 2023 am 10:00 AM

随着数据的不断增长，表格显示变得更加困难。大多数情况下，表格中的数据量过大，导致表格在加载时变得缓慢，而且用户需要不断地浏览页面才能找到自己想要的数据。本文将介绍如何使用JavaScript实现表格数据的分页显示，让用户更容易找到自己想要的数据。一、动态创建表格为了使分页功能更加可控，需要动态创建表格。在HTML页面中，添加一个类似于下面的table元素。

Vue文档中的表格勾选和全选函数操作方法Jun 20, 2023 pm 10:33 PM

Vue是一种流行的JavaScript框架，它可以让开发人员轻松地构建交互式、响应式的Web界面。Vue框架提供了一系列的组件和指令，用于构建常见的页面元素，如表格、表单、菜单等。在这篇文章中，我们将探讨Vue文档中的表格勾选和全选函数操作方法。在Vue中，我们可以使用v-model指令将表单元素与Vue实例中的数据进行双向绑定。这使得我们可以轻松地收集用户

See all articles