Bagaimana untuk memaparkan fail json dalam jadual [kod pelaksanaan]_javascript kemahiran

WBOY
Lepaskan: 2016-05-16 09:00:20
asal
3143 orang telah melayarinya
<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>
Salin selepas log masuk

Saya pernah berfikir tentang cara untuk meletakkan kandungan json secara dinamik ke dalam jadual? Kadang-kadang saya akan ditanya dalam temuduga Sudah tentu, soalan semasa temuduga adalah bagaimana untuk melakukannya menggunakan ajax. Tetapi saya akan menulis demo mudah di sini, dan meletakkan json sedia ada ke dalam jadual. Saya telah membuat demo ini beberapa kali Walaupun ia diletakkan dalam jadual setiap kali, ia mungkin susunan menegak, seperti ini

Nama

Zhang San

Umur

26

Jantina

Lelaki

Mungkin begini

Nama

Umur

Jantina

Zhang San

26

Lelaki

Tetapi ini yang saya mahu

Nama Umur Jantina

Zhang San 26 lelaki

Selepas beberapa percubaan, saya mendapati bahawa saya perlu membuat pelarasan pada struktur rangka HTML Tidak mungkin hanya meletakkan tag jadual pada permulaan dua tag tr untuk mencapai hasil yang diingini Kesan yang anda inginkan

Artikel di atas tentang cara memaparkan fail json dalam jadual [kod pelaksanaan] ialah semua kandungan yang dikongsi oleh editor saya harap ia boleh memberi rujukan kepada anda, dan saya harap anda akan menyokong Script Home.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan