JSON是一種輕量級的數據交換格式,非常適合在Web應用程序之間傳遞數據。現在,我們可以使用JSON來添加圖片到表格中。
{ "person": [ { "name": "張三", "age": 23, "picture": "https://example.com/image.jpg" }, { "name": "李四", "age": 25, "picture": "https://example.com/another-image.jpg" } ] }
在上面的JSON代碼中,我們可以看到有一個名為“person”的數組,包含兩個對象。每個對象包含一個名為“name”的屬性,一個名為“age”的屬性,以及一個名為“picture”的屬性。
我們可以使用JavaScript和HTML來解析這個JSON,并將其中的內容填入一個HTML表格內。我們可以使用以下JavaScript代碼來獲取數據并填充表格:
let data = JSON.parse('JSON數據'); let table = document.createElement('table'); let tbody = document.createElement('tbody'); data.person.forEach(function(item) { let tr = document.createElement('tr'); let tdName = document.createElement('td'); let tdAge = document.createElement('td'); let tdPicture = document.createElement('td'); tdName.textContent = item.name; tdAge.textContent = item.age; let img = document.createElement('img'); img.src = item.picture; tdPicture.appendChild(img); tr.appendChild(tdName); tr.appendChild(tdAge); tr.appendChild(tdPicture); tbody.appendChild(tr); }); table.appendChild(tbody); document.body.appendChild(table);
在這個JavaScript代碼中,我們首先解析了JSON數據,然后創建了一個HTML表格,并為表格創建了一個
元素。接著我們使用forEach函數迭代數組中的每個對象,并創建一個新的對于每個對象,我們將其名字和年齡填充到第一個和第二個
最后,我們將
元素添加到表格中,并將表格添加到HTML頁面中。下一篇json把值賦給別的之